jquery - 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;
});

小提琴

---

您可以通过删除不必要的变量来使代码更短，但它会失去一些可读性：

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

小提琴