Question

我正在制作手风琴，您可以在http://jsfiddle.net/ybgjub4g/

看到

每个手风琴都会在手风琴上点击并且当前的手风琴打开，唯一的问题是，当我点击当前打开的手风琴来关闭它然后它关闭并重新打开时，我无法弄清楚原因。

$(document).ready(function() {
    (function($) {
        var allPanels = $('.accordion > span').hide();
        $('.accordion > .question').click(function() {
            allPanels.slideUp();
            $(this).next('span').slideDown();
            $('.accordion.current').removeClass('current');
            $(this).parent().addClass('current');
            return false;
        });
    }
    )(jQuery);
});

Answer 1

这是DEMO

JS：

$(document).ready(function() {
(function($) {
    var allPanels = $('.accordion > span');

    $('.accordion > .question').click(function() {
        var _this = this;

        $('.current > span ').slideUp()

        if(!$(_this).parent().hasClass('current')){
          $(_this).next('span').slideDown();
           $('.accordion.current').removeClass('current');
           $(_this).parent().addClass('current');
        }else{

           $(_this).parent().removeClass('current');
        }




        return false;
    });
}
)(jQuery);
});

Answer 2

您可以尝试此解决方案

$(".question").click(function(){

    if(false == $(this).next().is(':visible')) {
        $('span').slideUp(300);
    }
    $(this).next().slideToggle(300);
});

http://jsfiddle.net/ybgjub4g/5/

Answer 3

修正使用：

$(document).ready(function() {
    $(".accordion span").hide();
    $(".accordion .question").click(function(){
        if(false == $(this).next().is(':visible')) {
            $('span').slideUp(300);
        }
        $(this).next().slideToggle(300);
        $('.accordion.current').removeClass('current');
        $(this).parent().addClass('current');
    });
});

手风琴重新开启

3 个答案: