单击jQuery隐藏相同的手风琴面板

Question

我使用的是JQuery手风琴，一切似乎都能正常工作，除非你点击活动面板时它会向上和向下滑动。

当我点击活动面板时，我需要隐藏它，但如果我选择一个新面板，我需要它向上滑动隐藏旧的活动面板，然后向下显示新选择的面板。

jQuery的：

$(document).ready(function(){
    $('.tab-panels .tabs li').click(function(){
        var panel = $(this).closest('.tab-panels');

        panel.find('.tabs li .active').removeClass('active');
        $(this).addClass('active');

        var panelToShow = $(this).attr('rel');

        panel.find('.panel.active').slideUp(500, nextPanel);

        function nextPanel() {
            $(this).removeClass('active');
            $('#'+panelToShow).slideDown(500, function(){
                $(this).addClass('active');
            });
        }

        });

    });

http://jsfiddle.net/x1zw352t/41/

感谢。

Answer 1

这是使用您的代码：

http://jsfiddle.net/austinthedeveloper/x1zw352t/42/

诀窍是围绕你的slideUp函数有一个条件语句：

if ($('#' + panelToShow).hasClass('active')) {
  panel.find('.panel.active').slideUp(500);
} else {
  panel.find('.panel.active').slideUp(500, nextPanel);
}

我还添加了一个标准的.active类，以确保第一个显示：

div.active {
    display: block;
}