Question

我有一个非常讨厌的问题，这可能是我对javascript和jQuery知之甚少的产物。

我有一个使用递归来启用层次结构的列表，它看起来如下

$(function (){
    $('#foo').click(function() {
        $(this).children('ul').slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id='foo'>A
        <ul>
            <li id='foo'>B
                <ul>
                    <li>
                        Sub-sub
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我正在尝试完成折叠功能，因此当用户点击“A”时，所有子元素都会折叠，如果她点击“B”节点，则所有'B'的孩子都会崩溃。但是，无论如何，我总是最终得到所有ID ='foo'崩溃的列表。

在我看来，$（this）.children（'ul'）。slideToggle（）;会折叠孩子，因为$（this）指向单击的列表元素......？

现在已经很久很久了，希望得到一些帮助！

Answer 1

这里你去...... HTML没有变化。但与其他建议一样，您需要拥有唯一的ID

＆＃13;

$(function (){
    $('li').click(function(event) {
        event.stopPropagation();
    $(event.target).children('ul').slideToggle();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id='foo'>A
        <ul>
            <li id='foo'>B
                <ul>
                    <li>
                        Sub-sub
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

＆＃13;

使用jQuery折叠层次结构中的嵌套列表

1 个答案: