如何让jQuery手风琴折叠？

Question

下面是代码：

(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/

如何使手风琴崩溃时再点击面板？

Answer 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); 

Answer 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()

_{P.S：不要滥用return false，使用正确的event.preventDefault来代替。}