Question

我有一个无序列表，点击时会显示他们的孩子。我正在尝试添加该功能，当父母显示子项并且单击该父项的兄弟时，其他子项会在新项目打开时关闭。以下是我到目前为止的情况：

<ul class="list">
    <li> <a>Categories</a>
        <ul>
            <li> <a>Parent</a>
                <ul>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                </ul>
            </li>
            <li> <a>Parent</a>
                <ul>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                </ul>
            </li>
            <li> <a>Parent</a>
                <ul>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                </ul>
            </li>
            <li> <a>Parent</a>
                <ul>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                    <li><a>Child</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

这是我的jquery：

$(document).ready(function(){
    $('.list > li a').click(function(){
        $(this).parent().children('ul').toggle();
    });

这是一个jfiddle：https://jsfiddle.net/hmsvox5a/

现在，如果您单击父级，则会显示子级。如果单击另一个父项，则其子项也会显示。这使得两组儿童打开。当我打开第二个时，我试图让第一组孩子关闭。当我试图隐藏兄弟姐妹的孩子时，它会弄乱整个jquery。有什么想法吗？

Answer 1

我不会撒谎并且告诉你这会扩展或者它不是很糟糕，但这是我想到的第一件事。有很多方法可以解决这个问题。

$(document).ready(function(){
    $('.list > li a').click(function(){
        $('.open').parent().children('ul').toggle();
        $('.open').removeClass('open');
        $(this).addClass('open').parent().children('ul').toggle();
    });
});

Answer 2

我相信你想要的是这个吗？

$(document).ready(function(){
    $('.list > li a').click(function(){
        $(this).parent('li').siblings('li').children('ul').hide();
        $(this).siblings('ul').toggle().children().show();
    });
});

在此测试：http://jsfiddle.net/vgwrqr6c/

Answer 3

我更喜欢在子节目上使用CSS来显示其父节目时的项目。然后这个有效的脚本工作。

它保留对最后选择的父级的引用，因此它不必搜索整个dom。

$(document).ready(function(){
  var $selected;
  $('.list > li a').click(function(){ 
    if($selected){
      $selected.remove class("open");
    }
    $selected = $(this).parent();
    $selected.add class("open");
   });
});

CSS会是这样的。

li ul{ display:none;}
li.open ul{ display: block}

使用无序列表

3 个答案: