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

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

javascript

使用JavaScript在HTML中展开/折叠列表,javascript,Javascript,朋友们，我正在为折叠/展开列表编写JavaScript。这是我的名片。我想在它上面工作，在第n层，我可以显示孩子，但它不能隐藏孩子。我希望你们能帮助我。。提前感谢…这将实现以下目的： event.stopPropagation(); 如果调试代码，您将看到正在为每个父级调用事件ul。看看这个： $("#ExpList ul li:has(ul)").click(function(event) { event.stopPropagation(); $(this).fi

朋友们，我正在为折叠/展开

列表编写JavaScript。这是我的名片。我想在它上面工作，在第n层，我可以显示孩子，但它不能隐藏孩子。我希望你们能帮助我。。

提前感谢…

这将实现以下目的：

event.stopPropagation();

如果调试代码，您将看到正在为每个父级调用事件

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>



1号平台

儿童-1

P-C-C-1

HTML注意事项：

我不知道是否可以使用
```
div
```
包装整个列表，但我认为这样做更有意义
您正在为所有
```
ul
```
使用id
```
ExpList
```
。这不是我们使用
```
id
```
的方式。取而代之的是，为了选择许多元素，使用它自己的标记或公共类
我删除了所有
```
ul
```
中存在的
```
onClick=openChild（）
```
。这是你小提琴上的一个错误

JavaScript注意事项：

您不必将选择器与find this way混用
```
$（“#ExpList”）.find（'li:has（ul）'）
```
。您可以在同一个选择器上使用它，就像我所做的那样
```
$（“#ExpList ul li:has（ul）”）
```
您不需要搜索所有
```
ul
```
子项（
```
$（this）.children（'ul'）
```
），因为您只有一个，所以我使用了这个，它只查找一个：
```
$（this）.查找（'>ul'）
```
如前所述，
```
事件.stopPropagation（）
```
起到了作用。您不需要在所有父级
```
ul
```
上触发
```
单击事件
```


在CSS中，我刚刚将#ExpList
更改为this#ExpList ul
，以在新结构中工作。我希望它能有所帮助。
假设我在
标记中有内容，我如何才能使切换仅通过单击
中的元素触发？