如何使 jQuery 手风琴折叠？

【问题标题】：How to make jQuery accordion collapse?如何使 jQuery 手风琴折叠？
【发布时间】：2013-05-29 10:39:51
【问题描述】：

代码如下：

(function($) {

var allPanels = $('.accordion > dd').hide();

$('.accordion > dt > a').click(function() {
allPanels.slideUp();
$(this).parent().next().slideDown();
return false;
});

})(jQuery);

http://jsfiddle.net/chriscoyier/VPfJ5/3/

如何让手风琴在再次单击时折叠面板？

【问题讨论】：

标签： jquery-ui-accordion

【解决方案1】：

这就是答案：

(function($) {

var allPanels = $('.accordion > dd').hide();

$('.accordion > dt > a').click(function() {
    allPanels.slideUp();

    if($(this).parent().next().is(':hidden'))
    {
        $(this).parent().next().slideDown();
    }

    return false;
 });

})(jQuery);

【讨论】：

【解决方案2】：

一个更简单且防弹的方法：LIVE DEMO

var allPanels = $('.accordion > dd').hide();

$('.accordion > dt > a').click(function( e ) {
   e.preventDefault(); // don't use return false;
   allPanels.stop().slideUp();
   $(this).parent().next('dd').stop().slideToggle();
 });

诀窍是

slideUp所有面板
但在当前使用slideToggle
防弹感谢正确使用.stop()

_{PS：不要误用return false，请改用正确的event.preventDefault。}

【讨论】：