0

我正在构建此菜单，但在排除父母及其子女时遇到问题。我希望在没有额外课程的情况下解决这个问题。

所以它假设的工作方式是点击 aa.clicked并且它在它自己.hide()的外部但在它的范围内li elementsliul

找到父母并在我做ul的课程上放一堂课没问题。这里的难点在于排除. 听起来确实很乱，所以我尽量在脚本中发表评论。lili.activeli.active

谢谢大家的输入

编辑：我在解释方面做得很差，但就像我点击level 1 - 1并level 1 - 2假设要隐藏一样，这就是我们在菜单中更深入地使用 2 - 1 等的模式

首先是演示：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...
  • 然后找到这个李的所有兄弟姐妹......
  • 隐藏它们。
于 2012-05-22T20:37:07.520 回答
0

如何ul在树上找到下一个，隐藏所有lis，然后只显示当前li？

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

编辑：虽然另一个答案是一个更好的解决方案......

于 2012-05-22T20:44:17.907 回答