javascript - 下滑内容

Question

我有滑动菜单内容的工作代码。

但是，我在保持活动状态时遇到了一些麻烦，这与单击按钮时的悬停状态相同，并在单击按钮关闭它时将其关闭。

这是我的工作示例。

// IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
    // ADD THE ON CLASS TO THE BUTTON
    $(this).addClass('on');

    // OPEN THE SLIDE
    $(this).next().slideDown('normal');
}

Answer 1

这是我的解决方案。

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.accordionButton').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('.accordionButton').removeClass('on');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        var self = this;
        $(this).next().slideToggle('normal', function() {
             $(self).toggleClass('on', $(this).is(':visible'));                                   
        });
     });

试用演示

Answer 2

尝试

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {

    //REMOVE THE ON CLASS FROM ALL BUTTONS
    $('.accordionButton').not(this).removeClass('on');

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
    if($(this).next().is(':hidden') == true) {

        //ADD THE ON CLASS TO THE BUTTON
        $(this).addClass('on');

        //OPEN THE SLIDE
        $(this).next().slideDown('normal');
    }

});

演示：小提琴