Question

朋友们，我正在使用 JavaScript 进行展开/展开<UL>列表。这是我的Code。我想在Nth Level工作，我可以展示Child，但它不是隐藏孩子。我希望你们能帮帮我.. 在此先感谢...

Answer 1

这样可以解决问题：

event.stopPropagation();

Docs

如果您调试代码，您将看到为每个父ul调用该事件。看看这个：

$("#ExpList ul li:has(ul)").click(function(event) { 
    event.stopPropagation();

    $(this).find('> ul')
        .toggleClass("hiddenChild")
        .toggleClass("displayChild"); 
});

HTML：

<div id='ExpList'>
    <ul>
        <li>Platform-1
            <ul class='hiddenChild'>
                <li>Child-1
                    <ul class='hiddenChild'>
                        <li>P-C-C-1</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Fiddle

HTML注意事项：

我不知道你是否可以使用div包装整个列表，但我认为这样做会更有意义;
您为所有ExpList使用了身份ul。这不是我们使用id的方式。相反，为了选择许多元素，请使用自己的标记或公共类;
我删除了onClick = openChild()中存在的ul。这是你的小提琴中的一个错误。

JavaScript注意事项：

您不必将选择器与查找方式$("#ExpList").find('li:has(ul)')混合使用。您可以在同一个选择器上使用它，就像我$("#ExpList ul li:has(ul)");
您不需要搜索所有ul个孩子（$(this).children('ul')），因为您只有一个孩子，我用它来代替一个：$(this).find('> ul');
如前所述，event.stopPropagation()可以解决问题。您不需要在所有父click上触发ul事件。

在CSS中，我刚刚将#ExpList更改为此#ExpList ul以在新结构中工作。我希望它有所帮助。

使用JavaScript在HTML中展开/折叠列表

1 个答案: