Question

我有以下结构：

<div class="Downloadscontainer">
<ul>
    <li>level 1</li>
    <li><a href="#">level 1</a>
        <ul>
            <li>level 2</li>
             <li>level 2</li>
             <li><a href="#">some page</a>
            <ul>
                <li>level 2</li>
                <li>level 2</li>
                 </ul>
            </li>
        </ul>
    </li>
</ul>

我试图在点击其父li时显示ul，以下是我的jquery

 $(document).ready(function () {
    $(".Downloadscontainer ul li ul").css("display", "none");
    $(".Downloadscontainer li").each(function () {
        $(this).click(function () {
            if ($(this).children('ul').length > 0) {
                $('.Downloadscontainer li ul').toggle();
            }
        });
    });
});

因此，如果我点击第1级LI，则会显示UL，然后如果我点击其中LI的{{1}}，那么它会关闭UL级别1 UL的{1}};我希望继续打开孩子LI。我如何获得此功能？

link to fiddle

Answer 1

http://jsfiddle.net/TrueBlueAussie/ot0kxs0z/2/

 $(".Downloadscontainer li").click(function (e) {
     e.stopPropagation();
     $(this).children('ul').toggle();
 });

备注：

您无需each将处理程序附加到jQuery中的多个元素。
您只需要停止子点击传播到DOM中的父LI
正如@George建议您最好不要附加锚点击。

采用锚方法我会建议以下 DOM-change friendly ：

http://jsfiddle.net/TrueBlueAussie/ot0kxs0z/5/

 $(".Downloadscontainer a").click(function (e) {
     e.preventDefault();
     $(this).closest('li').children('ul').toggle();
 });

注意：

找到与点击的锚点最接近的LI，然后向下钻取到UL个孩子（而不是通过next导航，这需要一个已知的安排。
preventDefault将停止滚动到页面顶部的空白书签链接（示例中为href="#"）。如果它们是完整链接，则会阻止它们导航，因此如果您添加页面链接，则可能需要额外检查。

例如，您可以检查链接是否为空白书签，并允许其他链接正常启动：

http://jsfiddle.net/TrueBlueAussie/ot0kxs0z/7/

 $(".Downloadscontainer a").click(function (e) {
     if ($(this).attr("href") == '#') {
         e.preventDefault();
         $(this).closest('li').children('ul').toggle();
     }
 });

此小提琴有一个指向Google的外部链接，以及#链接。

Answer 2

如何将事件处理程序附加到锚点？：

$(".Downloadscontainer li a").click(function (e) {
    e.preventDefault();
    $(this).next('ul').toggle();
});

JSFiddle

请记住，如果它有链接，请阻止您的锚点的默认操作，以免被重定向。
.each()循环不是许多jQuery方法，包括.click()，.change()，.keydown()等事件处理绑定器方法的必要条件。

Answer 3

我试过这个并且它是成功的，你可以使用它

$(".main-menu li").click(function (e) {
    e.stopPropagation();
    $(this).children('ul').slideToggle().css("padding-left", "30px");
});

我添加了一些额外的填充物 - 留下每个孩子的ul，这样我们就可以理解/定义哪一个被扩展。

单击父li时展开子ul

3 个答案: