js实现目录折叠展开

基础概念

目录折叠展开是一种常见的用户界面交互功能，允许用户通过点击目录项来展开或折叠子目录。这种功能在网站导航、文件管理器、文档编辑器等场景中非常常见。

类型

手风琴效果：每次只展开一个目录项，其他目录项自动折叠。
多级展开：允许用户同时展开多个目录项及其子目录。
自动折叠：当用户点击其他目录项时，之前展开的目录项自动折叠。

应用场景

网站导航：在网站的侧边栏或顶部菜单中使用。
文件管理器：在操作系统的文件浏览器中常见。
文档编辑器：如Markdown编辑器中的目录导航。
仪表盘：在复杂的仪表盘中用于组织和管理多个模块。

实现示例

以下是一个简单的JavaScript实现目录折叠展开的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目录折叠展开示例</title>
    <style>
        .directory {
            margin-left: 20px;
        }
        .sub-directory {
            display: none;
        }
        .active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="directory">
        <div class="item" onclick="toggleDirectory(this)">目录1</div>
        <div class="sub-directory">
            <div class="item" onclick="toggleDirectory(this)">子目录1.1</div>
            <div class="sub-directory">
                <div class="item">子目录1.1.1</div>
            </div>
        </div>
        <div class="item" onclick="toggleDirectory(this)">目录2</div>
        <div class="sub-directory">
            <div class="item">子目录2.1</div>
        </div>
    </div>

    <script>
        function toggleDirectory(element) {
            const subDirectory = element.nextElementSibling;
            if (subDirectory && subDirectory.classList.contains('sub-directory')) {
                subDirectory.classList.toggle('active');
            }
        }
    </script>
</body>
</html>

解释

HTML结构：
- 使用嵌套的div元素来表示目录和子目录。
- 每个目录项都有一个onclick事件处理器，调用toggleDirectory函数。

CSS样式：
- .sub-directory默认设置为display: none;，表示子目录初始状态是折叠的。
- .active类用于展开子目录，设置display: block;。
JavaScript逻辑：
- toggleDirectory函数接收点击的目录项元素作为参数。
- 通过nextElementSibling获取紧随其后的子目录元素。
- 切换子目录元素的active类，从而实现展开和折叠的效果。

可能遇到的问题及解决方法

事件冒泡：
- 如果目录项嵌套较深，可能会出现事件冒泡问题，导致点击子目录项时触发父目录项的事件。
- 解决方法：在事件处理器中使用event.stopPropagation()阻止事件冒泡。

function toggleDirectory(event) {
    event.stopPropagation();
    const subDirectory = event.target.nextElementSibling;
    if (subDirectory && subDirectory.classList.contains('sub-directory')) {
        subDirectory.classList.toggle('active');
    }
}