使用jquery折叠列表

collapsing a list using jquery

本文关键字：列表 折叠 jquery 使用      更新时间：2023-09-26

我有一个列表，我试图崩溃，并有麻烦，一旦我得到较低的层次结构。这是我的html:

<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().find('ul').toggle();
    });
});

这里是一个jfiddle: http://jsfiddle.net/u7bczqup/

一旦你点击类别，父母就会下来。当这种情况发生时，父母的所有孩子都被显示出来，而不是隐藏起来。为什么不把这些藏起来?我试着调整我的jquery，但这导致它不工作。

它们不是隐藏的，因为jquery查找在它下面的任何后代，然后你在切换它们，你应该使用children()。

试试这个:

$(this).parent().children('ul').toggle();
http://jsfiddle.net/u7bczqup/1/

https://api.jquery.com/children/

试试吧。

JS: 

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

使用.find()的问题是它正在寻找所有的ul元素。您可以通过添加这一行来检查这一点:console.log($(this).parent().find('ul'));这将把它"找到"的所有ul标记打印到控制台。因为它会找到所有的，所以它会切换所有的

您正在方法.find('ul')中搜索所有直接子代的无序列表元素。它应该是。find('ul:first-child')或者更准确地说是。children(ul:first)所以它应该是

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

更多信息请参考jquery查找方法

相关文章：