本文提供一套简洁可靠的 html+css+javascript 方案，实现带图标开关、支持三级嵌套（菜单→子菜单→子子菜单）的响应式垂直导航栏，兼容现代浏览器，无需外部依赖（仅需 font awesome 图标和 jquery）。

本文提供一套简洁可靠的 html+css+javascript 方案，实现带图标开关、支持三级嵌套（菜单→子菜单→子子菜单）的响应式垂直导航栏，兼容现代浏览器，无需外部依赖（仅需 font awesome 图标和 jquery）。

核心结构设计

我们采用语义化嵌套

结构：顶层
包裹主菜单列表，每个带下拉项的菜单项添加 class="sub-menu"，其内部

表示子级菜单。为支持三级深度，子菜单中可再次嵌套 sub-menu —— 这种递归式标记方式清晰表达层级关系，也便于统一 JavaScript 控制。

<nav class="vertical-nav">
  <ul>
    <li><a href="#home">首页</a></li>
    <li class="sub-menu">
      <a href="#social">社交平台 <i class="fa fa-caret-down right"></i></a>
      <ul>
        <li class="sub-menu">
          <a href="#telegram">Telegram <i class="fa fa-caret-down right"></i></a>
          <ul>
            <li><a href="#t-group">群组管理</a></li>
            <li><a href="#t-channel">频道设置</a></li>
            <li><a href="#t-bot">机器人开发</a></li>
          </ul>
        </li>
        <li><a href="#wechat">微信</a></li>
        <li><a href="#twitter">X（Twitter）</a></li>
      </ul>
    </li>
    <li><a href="#about">关于</a></li>
  </ul>
</nav>

✅ 注意：所有下拉触发元素（即含 sub-menu 类的 ）必须包含 图标，用于视觉反馈与 JS 选择器定位；图标类名需与引入的 Font Awesome 版本匹配（示例基于 v4.x，若使用 v6+，请替换为 fa-solid fa-chevron-down 并调整 CSS）。

样式控制与交互细节

CSS 负责布局、悬停效果及初始隐藏状态。关键点包括：

• 主菜单项设为 display: block，统一背景与内边距；
• 所有子菜单
  默认 display: none（由 JS 控制显隐），避免页面加载时闪烁；
• 使用 transition 实现平滑背景色变化；
• .right 类确保下拉箭头右对齐且不干扰文本流。

.vertical-nav {
  width: 280px;
  margin: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.vertical-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vertical-nav li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f5f7fa;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eaeef5;
  transition: all 0.2s ease;
}
.vertical-nav li > a:hover {
  background: #eef1f7;
  color: #2c3e50;
}
.vertical-nav .sub-menu > a .fa {
  font-size: 12px;
  margin-left: 8px;
}
.vertical-nav ul ul {
  background: #fff;
  border-left: 2px solid #3498db;
}
.vertical-nav ul ul li a {
  padding-left: 40px;
  background: #fbfcfd;
}
.vertical-nav ul ul ul li a {
  padding-left: 64px;
}

JavaScript 交互逻辑（jQuery）

脚本仅需三行核心逻辑，即可实现逐级独立展开/收起，且自动切换箭头方向：

// 初始化：隐藏所有子菜单
$('.sub-menu > ul').hide();

// 点击任意子菜单标题时，切换其直属子菜单，并翻转对应图标
$('.sub-menu > a').on('click', function(e) {
  e.preventDefault();
  const $this = $(this);
  const $submenu = $this.next('ul');

  // 关闭同级其他展开项（可选增强体验）
  $this.parent().siblings('.sub-menu').children('ul').slideUp(150);

  // 切换当前菜单
  $submenu.slideToggle(200);
  $this.find('.fa').toggleClass('fa-caret-down fa-caret-up');
});

⚠️ 重要提示：

• 必须在 DOM 加载完成后执行（包裹于 $(document).ready() 或置于