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

Expand/Collapse List in HTML with JavaScript

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

朋友们，我正在研究JavaScript的折叠/展开<UL>列表。这是我的代码。我想在它上面工作，在第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>

小提琴。

HTML注意事项：

  • 我不知道您是否可以使用div包装整个列表，但我认为这样做更有意义;

  • 您对所有ul都使用 id ExpList。这不是我们使用id的方式。相反，对于选择许多元素，请使用自己的标签或公共类;

  • 我删除了所有ul中都存在的onClick = openChild()。这是在你的小提琴中抛出了一个错误。

JavaScript 注意事项：

  • 您不必将选择器与查找方式混合使用$("#ExpList").find('li:has(ul)') .您可以像我$("#ExpList ul li:has(ul)")一样在同一个选择器上使用它;

  • 您不需要搜索所有ul子项（$(this).children('ul')），因为您只有一个，我使用了这个，它只查找一个：$(this).find('> ul') ;

  • 如前所述，event.stopPropagation()可以解决问题。您无需在所有父ul上触发click事件。

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

相关文章：