0

このメニューを作成していますが、親とその子を除外する際に問題が発生しています。余分なクラスなしでこれを解決したいと思っています。

したがって、動作することを想定している方法は、aをクリックするa.clickedことであり、それはそれ自体.hide()のli elements外側liですが、ul

親を見つけて、私が行うulクラスを配置するのは問題ありません。ここで難しいのは、内のすべての要素を除外することです。面倒に聞こえるので、スクリプトでできる限りコメントするようにしています。lili.activeli.active

入力してくれてありがとう

編集：私は説明するのに貧弱な仕事をしましたが、私がクリックするように、非表示にすることになっていますlevel 1 - 1、そしてそれlevel 1 - 2は私たちが2-1ectでメニューを深くするにつれてパターンです

ここの最初はデモです：http： //jsfiddle.net/Abj9u/6/

$('.clicked').on('click', function(){
    var $this = $(this);

    //activate this li
    $this.parent('li:first').addClass('active');

    //hide the other level (1)(2)(3)(4)(ect..) li items
    //is there a way to exlude .active li and its children without adding a class like .sub to the sub li's?
    $this.parents('ul:first').find('li').not('.active').hide();

    //add class to this for style
    $this.addClass('selected');

    //show the sub ul
    $this.parent().children('ul:first').show();
});​

html

<ul id="nav">
    <li>
        <a href="#" class="clicked">Level 1 - 1</a>

        <ul class="hidden">
            <li><a href="#" class="clicked">Level 2.1 - 1</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.1 - 1</a></li></ul>                
            </li>
            <li><a href="#" class="clicked">Level 2.2 - 1</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.2 - 1</a></li></ul>                
            </li>
            <li><a href="#" class="clicked">Level 2.3 - 1</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.3 - 1</a></li></ul>                
            </li>
        </ul>                
    </li>

    <li>
        <a href="#" class="clicked">Level 1 - 2</a>

        <ul class="hidden">
            <li><a href="#" class="clicked">Level 2.1 - 2</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.1 - 2</a></li></ul>                
            </li>
            <li><a href="#" class="clicked">Level 2.2 - 2</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.2 - 2</a></li></ul>                
            </li>
            <li><a href="#" class="clicked">Level 2.3 - 2</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.3 - 2</a></li></ul>                
            </li>
        </ul>                
    </li>
</ul>​
4

2 に答える 2

1

多分これ：

$(this).closest('li').siblings().hide()

これが機能する理由については、かなり自明です。

  • この子要素から開始します...
  • 最初の親LIを見つけます...
  • 次に、このLIの兄弟をすべて見つけます...
  • それらを非表示にします。
于 2012-05-22T20:37:07.520 に答える
0

ulツリーの次を見つけて、すべてを非li表示にしてから、現在のものだけを表示するのはliどうですか？

$this.parents('ul:first > li').hide();
$this.parent().show();

編集：他の答えはしかしより良い解決策です...

于 2012-05-22T20:44:17.907 に答える