本文提供一套轻量、稳定且易定制的垂直导航栏实现方案，支持图标触发的逐级展开/收起功能，完美兼容三级菜单结构（菜单→子菜单→子子菜单），基于原生 jquery 实现，无需复杂依赖。

本文提供一套轻量、稳定且易定制的垂直导航栏实现方案，支持图标触发的逐级展开/收起功能，完美兼容三级菜单结构（菜单→子菜单→子子菜单），基于原生 jquery 实现，无需复杂依赖。

一、结构清晰的 HTML 布局

我们采用语义化嵌套

结构表达层级关系：顶级
• 表示一级菜单项；含 sub-menu 类的
• 表示可展开项，并在其 标签内添加 Font Awesome 下拉箭头（fa-caret-down）作为视觉提示。注意：仅需为有子级的菜单项添加 sub-menu 类，避免误触发。

  <nav class="vertical-nav animated bounceInDown"><ul>
  <li><a href="#Menu1">Menu 1</a></li>
      <li><a href="#Menu2">Menu 2</a></li>
      <li class="sub-menu">
        <a href="#Menu3">Menu 3 <i class="fa fa-caret-down right"></i></a>
        <ul>
  <li class="sub-menu">
            <a href="#Menu3.1">Menu 3.1 <i class="fa fa-caret-down right"></i></a>
            <ul>
  <li><a href="#Menu3.1.1">Menu 3.1.1</a></li>
              <li><a href="#Menu3.1.2">Menu 3.1.2</a></li>
              <li><a href="#Menu3.1.3">Menu 3.1.3</a></li>
            </ul>
  </li>
          <li><a href="#Menu3.2">Menu 3.2</a></li>
          <li><a href="#Menu3.3">Menu 3.3</a></li>
        </ul>
  </li>
      <li class="sub-menu">
        <a href="#Menu4">Menu 4 <i class="fa fa-caret-down right"></i></a>
        <ul>
  <li><a href="#Menu4.1">Menu 4.1</a></li>
          <li><a href="#Menu4.2">Menu 4.2</a></li>
        </ul>
  </li>
      <li><a href="#Menu5">Menu 5</a></li>
    </ul></nav>

  ✅ 关键设计点：

  • 使用 替代
    承载图标，更符合语义；
  • 所有子菜单
    均直接嵌套在父
    • 内，保证 DOM 层级与逻辑层级一致；
    • 箭头图标使用 float: right 并配合 margin-right 精准对齐，避免布局偏移。

    二、简洁高效的 CSS 样式控制

    样式聚焦于可读性、响应反馈与视觉一致性。所有子菜单默认隐藏，通过 display: none 控制；悬停与点击状态使用平滑过渡增强体验。

    .vertical-nav {
      position: relative;
      margin: 50px;
      width: 360px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    .vertical-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .vertical-nav li a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ebebeb;
      padding: 12px 16px;
      color: #333;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .vertical-nav li a:hover {
      background: #f8f8f8;
      color: #515151;
    }
    .vertical-nav .right {
      width: 16px;
      text-align: center;
      margin-left: 8px;
    }
    .vertical-nav ul ul {
      background-color: #f1f1f1;
      display: none; /* 初始隐藏 */
    }
    .vertical-nav ul ul li a {
      padding-left: 32px; /* 缩进体现层级 */
    }
    .vertical-nav ul ul ul li a {
      padding-left: 48px;
    }

    ⚠️ 注意事项：

    • 若引入 Font Awesome，请确保在 中正确加载 CDN（如 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css）；
    • 子菜单缩进通过 padding-left 实现，比 margin-left 更稳定，避免浮动干扰；
    • 推荐为 .vertical-nav 添加 font-family 统一字体栈，提升跨平台渲染一致性。

    三、精准可控的 jQuery 交互逻辑

    JavaScript 仅需 4 行核心代码，即可实现逐级独立展开/收起，且自动切换箭头方向（fa-caret-down ↔ fa-caret-up）。关键在于使用 $(this).parent() 定位当前点击项的

  • ，再用 children("ul") 精确选取直属子菜单，避免影响其他层级。

    $(document).ready(function() {
      // 初始化：隐藏所有子菜单
      $('.sub-menu > ul').hide();
    
      // 点击可展开项时，仅切换其直属子菜单
      $(".sub-menu > a").on('click', function(e) {
        e.preventDefault(); // 阻止默认跳转行为
        const $submenu = $(this).next('ul');
        $submenu.slideToggle(150);
        $(this).find('.right').toggleClass('fa-caret-down fa-caret-up');
      });
    });

    ✅ 优势说明：

    • 使用 preventDefault() 避免页面跳转干扰用户体验；
    • $(".sub-menu > a") 的子选择器确保只绑定一级可展开项的链接，避免事件冒泡误触发；
    • $(this).next('ul') 比 children("ul") 更健壮（不依赖内部结构是否含文本节点）；
    • 动画时长设为 150ms，兼顾流畅性与响应速度。

    总结

    该垂直导航栏方案具备三大特性：结构清晰（HTML）、样式解耦（CSS）、逻辑精准（JS）。它天然支持无限层级扩展（只需按相同模式嵌套），且无外部框架依赖，易于集成到任何现有项目中。如需增强功能，可轻松扩展：添加键盘导航（↑↓←→+Enter）、记忆上次展开状态（localStorage）、或适配移动端手势（touchstart）。保持结构纯净，是长期可维护性的基石。