Slidedown内容

Question

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

但是，当你点击一个按钮并在你点击它关闭它时取下它时，我在保持活动状态时会遇到一些麻烦，就像悬停状态一样。

Here is my working example.

// 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'));                                   
        });
     });

Try the demo

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');
    }

});

演示：Fiddle