jQuery的下推/了slideDown衝突

Question

我是繼小提琴，我發現這裏的計算器

http://jsfiddle.net/abtPH/3/

$('li').on('click', function(e){ 
    $(this).find('.outer').slideToggle(); 
    $(this).toggleClass('active', 400); 
}); 

所有的一切都已經工作需要，但是，當我點擊多個滑下他們都必須是按照打開的順序關閉，因爲一旦點擊了新的滑動窗口，它們就不會關閉。

有一種方法可以在每次打開新的滑動窗口後關閉每個滑動窗口？

Answer 1

您可以通過針對點擊'li'兄弟姐妹關閉其他'.outer'：

$('li').on('click', function (e) { 
    $(this).find('.outer').slideToggle(); 
    $(this).toggleClass('active', 400); 
    //remove the active class, then move to its '.outer' child and slide it up 
    $(this).siblings().removeClass('active').find('.outer').slideUp(); 
}); 

Answer 2

馬克S是正確的

仍，如果你想優化的代碼還可能會喜歡這個

$('li').on('click', function(e){ 
    $(this).find('.outer').slideToggle().end().siblings().removeClass('active').find('.outer').slideUp();     
    $(this).toggleClass('active', 400); 
}); 

寫

邊注：

在jsfiddele中，您提供了代碼div style =「width：156px;高度：宣佈內聯樣式。它不是好習慣，而是你可以定義div上的類並在樣式表中聲明各自的樣式