求带三级下拉的可折叠垂直导航栏代码（支持jQuery）

HTML结构 #

<div class="sidebar">
  <div class="toggle-icon">☰</div>
  <nav class="nav-menu">
    <ul>
      <li class="menu-item">
        <span class="menu-title">首页</span>
      </li>
      <li class="menu-item has-submenu">
        <span class="menu-title">社交媒体</span>
        <ul class="sub-menu">
          <li class="sub-menu-item">
            <span class="sub-menu-title">微信</span>
          </li>
          <li class="sub-menu-item has-subsubmenu">
            <span class="sub-menu-title">海外平台</span>
            <ul class="sub-sub-menu">
              <li class="sub-sub-menu-item">Telegram</li>
              <li class="sub-sub-menu-item">Twitter</li>
              <li class="sub-sub-menu-item">Facebook</li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="menu-item has-submenu">
        <span class="menu-title">工具</span>
        <ul class="sub-menu">
          <li class="sub-menu-item">在线编辑器</li>
          <li class="sub-menu-item">文件转换</li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

CSS样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  background-color: #2c3e50;
  transition: width 0.3s ease;
  width: 220px;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 50px;
}

.toggle-icon {
  color: white;
  font-size: 24px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  background-color: #34495e;
}

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

.menu-item {
  color: white;
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #34495e;
}

.menu-item:hover {
  background-color: #34495e;
}

.menu-title, .sub-menu-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-title::after, .sub-menu-title::after {
  content: "▶";
  font-size: 12px;
  transition: transform 0.3s ease;
}

.menu-item.open .menu-title::after,
.sub-menu-item.open .sub-menu-title::after {
  transform: rotate(90deg);
}

.sub-menu, .sub-sub-menu {
  background-color: #34495e;
  display: none;
}

.sub-menu-item {
  padding: 10px 25px;
  border-bottom: 1px solid #2c3e50;
}

.sub-sub-menu {
  background-color: #4a6572;
}

.sub-sub-menu-item {
  padding: 8px 40px;
  border-bottom: 1px solid #34495e;
}

.sidebar.collapsed .menu-title span,
.sidebar.collapsed .sub-menu-title span,
.sidebar.collapsed .sub-sub-menu-item {
  display: none;
}

.sidebar.collapsed .sub-menu,
.sidebar.collapsed .sub-sub-menu {
  position: absolute;
  left: 50px;
  top: 0;
  width: 200px;
  height: auto;
}

jQuery脚本 #

$(document).ready(function() {
  // 侧边栏展开/收起切换
  $('.toggle-icon').click(function() {
    $('.sidebar').toggleClass('collapsed');
    // 收起时关闭所有展开的子菜单
    if ($('.sidebar').hasClass('collapsed')) {
      $('.menu-item.open, .sub-menu-item.open').removeClass('open');
      $('.sub-menu, .sub-sub-menu').slideUp();
    }
  });

  // 一级菜单展开子菜单
  $('.menu-item.has-submenu').click(function(e) {
    // 避免点击子菜单时触发父菜单事件
    if (!$(e.target).closest('.sub-menu').length) {
      $(this).toggleClass('open');
      $(this).find('.sub-menu').slideToggle();
      // 关闭其他一级菜单的子菜单
      $('.menu-item.has-submenu').not(this).removeClass('open');
      $('.menu-item.has-submenu').not(this).find('.sub-menu').slideUp();
    }
  });

  // 二级菜单展开三级菜单
  $('.sub-menu-item.has-subsubmenu').click(function(e) {
    e.stopPropagation(); // 阻止事件冒泡到父菜单
    $(this).toggleClass('open');
    $(this).find('.sub-sub-menu').slideToggle();
    // 关闭其他二级菜单的三级菜单
    $('.sub-menu-item.has-subsubmenu').not(this).removeClass('open');
    $('.sub-menu-item.has-subsubmenu').not(this).find('.sub-sub-menu').slideUp();
  });
});

功能说明 #

• 点击侧边栏顶部的「☰」图标可切换导航栏的展开/收起状态
• 一级菜单（如「社交媒体」）点击可展开/收起二级子菜单
• 二级菜单（如「海外平台」）点击可展开/收起三级子菜单
• 收起导航栏时，hover展开的子菜单会显示在侧边栏外侧，保证菜单可访问
• 所有切换带平滑过渡动画，提升交互体验

内容的提问来源于stack exchange，提问作者layono