首页 > 文章 > 前端

三级嵌套导航栏：图标开关+平滑动画实现

时间：2026-05-13 14:09:29 397浏览收藏

本文介绍了一种简洁高效、开箱即用的三级嵌套垂直导航栏实现方案，基于 jQuery + HTML + CSS 构建，支持图标动态翻转（点击展开/收起时箭头自动切换）、平滑 slideToggle 动画、语义化层级结构及良好浏览器兼容性，特别适合后台管理系统或侧边栏场景；代码清晰解耦、易于定制扩展，还贴心提供了 Font Awesome 图标集成、无障碍属性（aria-expanded）建议、原生 JS 替代方案及移动端适配思路，让开发者既能快速落地，又能按需深度优化。

构建一个支持三级嵌套的可折叠垂直导航栏（含图标开关与平滑动画）

本文提供一套简洁可靠的 jQuery + HTML + CSS 实现方案，用于创建带图标开关、三级下拉菜单（菜单 → 子菜单 → 子子菜单）的响应式垂直导航栏，兼容主流浏览器，代码结构清晰、易于定制。

本文提供一套简洁可靠的 jQuery + HTML + CSS 实现方案，用于创建带图标开关、三级下拉菜单（菜单 → 子菜单 → 子子菜单）的响应式垂直导航栏，兼容主流浏览器，代码结构清晰、易于定制。

在现代 Web 应用中，垂直导航栏常用于后台管理系统或侧边栏布局。当菜单层级加深（如需支持“社交平台 → Telegram → 频道管理 → 成员统计”这类三级路径），既要保证交互直观，又要避免视觉混乱。以下方案采用语义化 HTML 结构、轻量 CSS 样式与精准 jQuery 控制，实现单击展开/收起任意层级子菜单，并配合 Font Awesome 箭头图标动态翻转，提升用户体验。

✅ 核心结构说明

使用嵌套

为一级菜单；含 .sub-menu 类的

可展开二级菜单；其内部再嵌套

所有下拉菜单默认隐藏（display: none），通过 jQuery 的 slideToggle() 实现平滑展开/收起；
箭头图标（.fa-caret-down / .fa-caret-up）随状态切换，增强视觉反馈。

? 完整代码示例

HTML（结构清晰，语义化）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>三级垂直导航栏</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 下方 CSS 放入 style 标签或外部文件 */
  </style>
</head>
<body>

<nav class="vertical-nav animated bounceInDown">
  <ul>
    <li><a href="#menu1">首页</a></li>
    <li><a href="#menu2">仪表盘</a></li>
    <li class="sub-menu">
      <a href="#menu3">社交平台 <i class="fas fa-caret-down right"></i></a>
      <ul>
        <li class="sub-menu">
          <a href="#menu31">Telegram <i class="fas fa-caret-down right"></i></a>
          <ul>
            <li><a href="#menu311">频道管理</a></li>
            <li><a href="#menu312">机器人配置</a></li>
            <li><a href="#menu313">消息模板</a></li>
          </ul>
        </li>
        <li><a href="#menu32">微信公众号</a></li>
        <li><a href="#menu33">微博开放平台</a></li>
      </ul>
    </li>
    <li class="sub-menu">
      <a href="#menu4">设置 <i class="fas fa-caret-down right"></i></a>
      <ul>
        <li><a href="#menu41">账户安全</a></li>
        <li><a href="#menu42">通知偏好</a></li>
        <li><a href="#menu43">API 密钥</a></li>
      </ul>
    </li>
    <li><a href="#menu5">帮助中心</a></li>
  </ul>
</nav>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(document).ready(function() {
    // 初始化：隐藏所有子菜单（除顶层 ul 外）
    $('.sub-menu > ul').hide();

    // 点击带 .sub-menu 的链接时，切换对应子菜单
    $('.sub-menu > a').on('click', function(e) {
      e.preventDefault(); // 阻止跳转，仅触发折叠
      const $submenu = $(this).next('ul');
      const $icon = $(this).find('.right');

      $submenu.slideToggle(200, function() {
        // 动画完成后更新图标状态
        if ($submenu.is(':visible')) {
          $icon.removeClass('fa-caret-down').addClass('fa-caret-up');
        } else {
          $icon.removeClass('fa-caret-up').addClass('fa-caret-down');
        }
      });
    });
  });
</script>
</body>
</html>

CSS（精简高效，支持动画与悬停）

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #f8f9fa;
}

.vertical-nav {
  position: relative;
  margin: 30px auto;
  width: 280px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.vertical-nav ul {
  list-style: none;
}

.vertical-nav li {
  position: relative;
}

.vertical-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  transition: all 0.2s ease;
}

.vertical-nav a:hover {
  background-color: #f5f7fa;
  color: #2c3e50;
}

.vertical-nav .sub-menu > a {
  font-weight: 600;
  color: #2c3e50;
}

.vertical-nav .sub-menu > a:hover {
  background-color: #eef2f7;
}

.vertical-nav ul ul {
  background-color: #fafbfc;
}

.vertical-nav ul ul a {
  padding-left: 36px;
  font-size: 0.95em;
  color: #5a6a7e;
}

.vertical-nav ul ul ul a {
  padding-left: 56px;
  font-size: 0.9em;
  color: #7a8a9e;
}

.right {
  font-size: 0.85em;
  transition: transform 0.2s;
}

/* 可选：添加淡入动画（需引入 animate.css 或自定义） */
.animated.bounceInDown {
  animation: bounceInDown 0.6s ease;
}
@keyframes bounceInDown {
  0% { opacity: 0; transform: translateY(-30px); }
  60% { opacity: 1; transform: translateY(5px); }
  80% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

⚠️ 注意事项与最佳实践

图标依赖：本例使用 Font Awesome 6，请确保 CDN 正确引入；若项目已用其他图标库（如 Iconfont），请替换对应类名；
jQuery 版本：推荐使用 3.7+，避免低版本兼容性问题；如需无依赖方案，可用原生 JavaScript 重写事件逻辑（toggleAttribute('data-open') + classList.toggle()）；
移动端适配：当前方案未包含响应式断点，如需在小屏收起导航栏，建议配合汉堡按钮 + transform: translateX() 实现侧滑效果；
可访问性增强：为提升无障碍体验，建议为 .sub-menu 添加 aria-expanded 属性，并在 JS 中同步更新其值；
性能提示：避免在深层嵌套中滥用 slideToggle()，若菜单项超 20 条，可考虑虚拟滚动或懒加载子菜单。

该方案已在 CodePen 实际验证（参考示例），结构稳健、样式解耦、逻辑内聚，可直接集成至 Vue/React 项目（作为独立组件封装），亦适用于传统多页应用。掌握此模式后，你可轻松扩展至四级甚至更多层级——只需遵循相同的嵌套规则与事件委托逻辑。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载