HTML可折叠树形菜单实现方法

本篇文章给大家分享《HTML实现可折叠树形菜单通常需要结合HTML、CSS和JavaScript。以下是基本的实现方法：一、HTML结构使用

和
• 创建层级结构，每个可折叠项包含一个标题和子菜单。
  • 根节点
    • 子节点1
    • 子节点2
      • 子子节点1
      • 子子节点2
  二、CSS样式（控制显示与隐藏）使用 CSS 控制子菜单的显示和隐藏，并添加过渡效果使折叠更平滑。.tree-menu { list-style: none; padding-left: 20px; } .menu-title { cursor: pointer; user-select: none; } .submenu { display: none; list-style: none; padding-left: 20px; transition: all 0.3s ease; }三、》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

  制作可折叠树形菜单的常见HTML结构模式是使用嵌套的无序列表，1. 以

  作为容器，每个菜单项用
  • 表示；2. 在
  • 内包含可点击的文本和展开/收起图标（如span.toggle）；3. 若有子菜单，则在对应
  • 内嵌套新的
    ，形成层级结构；4. 通过CSS控制缩进与显示隐藏，JavaScript实现交互切换，最终构建出清晰、可交互的树形菜单结构。

    

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

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

    ）开始。每个菜单项是一个
    • ，如果这个
    • 下面还有子菜单，那么子菜单本身又是一个嵌套的
      。

      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'); // 切换箭头方向
                      }
                  }
              });
          }
      });

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

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

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

      和列表项
      • 。这就像你用纸笔画大纲，每一级都缩进一点。

        一个典型的模式是：

        <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>

        我喜欢在

      • 里面放一个来包裹菜单文本，再放一个或者来作为展开/折叠的图标。这样可以分别控制它们的样式和点击事件。关键在于，每一个可能包含子菜单

        本篇关于《HTML可折叠树形菜单实现方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！