jquery崩潰，如何打開和關閉其他人？

Question

如果我點擊「媒體」，它會滑下並顯示子鏈接。然後，我點擊「項目」，然後滑下來暴露其內的鏈接。當我點擊「項目？」時，如何隱藏「媒體」？

HTML代碼

<ul id="nav"> 
<li><a href="#" class="collapse">Media</a> 
    <ul> 
     <li><a href="#">Photos</a></li> 
     <li><a href="#">Video</a></li> 
     <li><a href="#">Audio</a></li> 
     </ul> 
</li> 
<li><a href="#" class="collapse">Items</a> 
    <ul> 
     <li><a href="#">Add</a></li> 
     <li><a href="#">List</a></li> 
     </ul> 
</li> 
</ul> 

JS代碼

// Collapsable navigation 
$('ul#nav .collapse:not(.open)').parents('li').find('ul').hide(); 

$('ul#nav .collapse').click(function() { 
    if(! $(this).hasClass('open')) { 
     $(this).parents('li').find('ul').stop(true, true).slideDown('fast'); 
     $(this).addClass('open'); 
    } else { 
     $(this).parents('li').find('ul').stop(true, true).slideUp('fast'); 
     $(this).removeClass('open'); 
    } 
     return false; 
}); 

Answer 1

手風琴邏輯非常簡單，這裏有一個註釋版本：

$('#nav .collapse').click(function() { 
    //stores a reference to the `ul` which will be toggled 
    var toToggle = $(this).closest('li').find('ul'); 
    //hide the others 
    $('#nav ul').not(toToggle).slideUp(200); 
    //toggle the clicked one 
    toToggle.slideToggle(200); 
    return false; 
}); 

Fiddle

---

可以使代碼甚至消除不必要的變量短，但隨後失去了一些可讀性：

$('#nav .collapse').click(function() { 
    $('#nav ul').not(
     $(this).closest('li').find('ul').slideToggle(200) 
    ).slideUp(200); 
    return false; 
}); 

Fiddle