如何实现支持三级嵌套的可折叠垂直导航栏

时间：2026-06-08 09:53:47 编辑：袖梨来源：一聚教程网

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

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

一、结构清晰的 HTML 布局

我们采用语义化嵌套 <ul> 结构表达层级关系：顶级 <li> 表示一级菜单项；含 sub-menu 类的 <li> 表示可展开项，并在其 <a> 标签内添加 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>

✅ 关键设计点：

使用 <i> 替代 <div> 承载图标，更符合语义；

所有子菜单 <ul> 均直接嵌套在父 <li> 内，保证 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，请确保在 <head> 中正确加载 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() 定位当前点击项的 <li>，再用 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）。保持结构纯净，是长期可维护性的基石。

推荐专题

最新下载

热门教程

如何实现支持三级嵌套的可折叠垂直导航栏

一、结构清晰的 HTML 布局

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

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

总结

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程