1

「メディア」をクリックすると、下にスライドしてサブリンクが表示されます。次に、[アイテム] をクリックすると、下にスライドしてリンクが表示されます。「アイテム」をクリックしたときに「メディア」を非表示にするにはどうすればよいですか?

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

1 に答える 1

2

アコーディオンのロジックは非常に単純です。コメント付きのバージョンを次に示します。

$('#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;
});

フィドル

于 2013-01-21T22:39:24.717 に答える