HTML如何制作树形菜单？可折叠的目录怎么实现？-html教程-PHP中文网

HTML如何制作树形菜单？可折叠的目录怎么实现？

小老鼠

发布： 2025-08-11 16:30:04

原创

752人浏览过

制作可折叠树形菜单的常见html结构模式是使用嵌套的无序列表，1. 以<ul>作为容器，每个菜单项用<li>表示；2. 在<li>内包含可点击的文本和展开/收起图标（如span.toggle）；3. 若有子菜单，则在对应<li>内嵌套新的<ul class="nested">，形成层级结构；4. 通过css控制缩进与显示隐藏，javascript实现交互切换，最终构建出清晰、可交互的树形菜单结构。

HTML如何制作树形菜单？可折叠的目录怎么实现？

制作HTML树形菜单，实现可折叠目录，核心在于巧妙地结合HTML的嵌套列表结构、CSS的视觉控制以及JavaScript的交互逻辑。它就像你文件管理器里的文件夹，点一下展开，再点一下收起，背后的原理就是这三者的协同作用，缺一不可。

要构建一个可折叠的树形菜单，我们通常会从一个嵌套的无序列表（

<ul>

登录后复制

）开始。每个菜单项是一个

<li>

登录后复制

，如果这个

<li>

登录后复制

下面还有子菜单，那么子菜单本身又是一个嵌套的

<ul>

登录后复制

。

HTML 结构： 想象一下你的文件系统，它通常长这样：

<div class="tree-menu">
    <ul>
        <li>
            <span class="toggle">▶</span> 文件夹A
            <ul class="nested">
                <li>文件A-1</li>
                <li>文件A-2</li>
            </ul>
        </li>
        <li>
            <span class="toggle">▶</span> 文件夹B
            <ul class="nested">
                <li>文件B-1</li>
                <li>
                    <span class="toggle">▶</span> 文件夹B-2
                    <ul class="nested">
                        <li>文件B-2-1</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>文件C</li>
    </ul>
</div>

登录后复制

这里，

span.toggle

登录后复制

就是我们用来点击展开/收起的那个小箭头或者加号。

ul.nested

登录后复制

是默认需要隐藏的子菜单。

立即学习“前端免费学习笔记（深入）”；

CSS 样式： 样式是让它看起来像个菜单的关键。我们需要隐藏子菜单，并给父级菜单添加一些视觉提示。我个人很喜欢给箭头加个旋转动画，看起来会更流畅，用户体验上瞬间提升一个档次。

.tree-menu ul {
    list-style: none; /* 移除默认的项目符号 */
    padding-left: 0; /* 移除默认的左内边距 */
}

.tree-menu li {
    margin: 5px 0;
    cursor: pointer; /* 鼠标悬停时显示手型 */
    /* 确保点击 li 任意位置也能触发，但事件绑定时要小心 */
}

/* 嵌套的 ul，增加左边距来创建层次感 */
.tree-menu ul ul {
    padding-left: 25px; /* 每次嵌套增加 25px 缩进 */
}

.tree-menu li .nested {
    display: none; /* 默认隐藏所有子菜单 */
    overflow: hidden; /* 配合 max-height 做动画 */
    max-height: 0;
    transition: max-height 0.3s ease-out; /* 平滑展开动画 */
}

.tree-menu li .nested.active {
    display: block; /* 实际显示 */
    max-height: 500px; /* 设置一个足够大的值，确保内容能完全显示 */
}

.tree-menu .toggle {
    display: inline-block;
    width: 1em; /* 确保有足够空间显示图标 */
    text-align: center;
    margin-right: 8px;
    font-size: 0.8em; /* 小一点的图标 */
    transition: transform 0.2s ease-in-out; /* 箭头旋转动画 */
}

.tree-menu .toggle.rotated {
    transform: rotate(90deg); /* 展开时箭头旋转 */
}

登录后复制

JavaScript 逻辑： 这是让菜单“活”起来的部分。我们需要监听点击事件，然后切换子菜单的显示状态，并更新箭头方向。这事儿吧，其实不复杂，但逻辑要清晰。

document.addEventListener('DOMContentLoaded', function() {
    const treeMenu = document.querySelector('.tree-menu');

    if (treeMenu) {
        // 使用事件委托，将事件监听器绑定到父容器上
        treeMenu.addEventListener('click', function(event) {
            const target = event.target;

            // 检查点击的是否是 .toggle 元素，或者 li 内部有 .toggle 且点击了 li 自身
            // 这样可以确保点击图标或菜单文本都能触发
            if (target.classList.contains('toggle') || (target.tagName === 'LI' && target.querySelector('.toggle'))) {
                const li = target.closest('li'); // 找到被点击元素最近的 li 父级
                if (!li) return; // 如果没有 li，则不处理

                const toggleSpan = li.querySelector('.toggle');
                // 确保只选择当前 li 下的直接子 ul.nested
                const nestedUl = li.querySelector(':scope > .nested');

                if (nestedUl && toggleSpan) {
                    nestedUl.classList.toggle('active'); // 切换显示/隐藏状态
                    toggleSpan.classList.toggle('rotated'); // 切换箭头方向
                }
            }
        });
    }
});

登录后复制

我个人更倾向于事件委托，因为它能更好地处理动态添加的菜单项，而且代码量也相对简洁，在大菜单时性能优势更明显。搞定这个，你就成功了一大半了。

Word-As-Image for Semantic Typography

文字变形艺术字、文字变形象形字

查看详情

制作可折叠树形菜单时，有哪些常见的HTML结构模式？

关于HTML结构，说到底，就是如何清晰地表达层级关系。最常见、也最符合语义化的，无疑是嵌套的无序列表

<ul>

登录后复制

和列表项

<li>

登录后复制

。这就像你用纸笔画大纲，每一级都缩进一点。

一个典型的模式是：

<ul>
    <li>
        <!-- 这一层是父级菜单项，通常包含可点击的文本和/或图标 -->
        <span class="menu-item-text">父级菜单项标题</span>
        <span class="expand-collapse-icon"></span> <!-- 比如一个箭头或加减号 -->

        <!-- 如果有子菜单，就在这里嵌套一个 ul -->
        <ul class="sub-menu">
            <li>子菜单项1</li>
            <li>子菜单项2</li>
            <!-- 子菜单项也可以继续嵌套 -->
            <li>
                <span class="menu-item-text">更深层级</span>
                <span class="expand-collapse-icon"></span>
                <ul class="sub-sub-menu">
                    <li>最深层级</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>另一个父级菜单项</li>
</ul>

登录后复制

我喜欢在