Swift中点击sidemenu按钮弹出subSidemenu的实现及功能名称咨询

兄弟，你说的这个功能官方名称一般叫嵌套侧边栏（Nested Sidebar），也常被称为多级侧边菜单，不少UI框架里会归类为「侧边抽屉嵌套」用法。下面给你整理几种实用的实现思路，适配不同技术栈：

原生HTML/CSS/JS实现（无框架场景） #

核心思路就是通过控制元素的显示状态和位置来实现滑入滑出效果，用transform做动画会比直接改display更流畅：

1. 先搭HTML结构 #

主侧边栏里放触发按钮和子侧边栏，子菜单默认隐藏：

<!-- 主侧边栏 -->
<div class="main-sidebar">
  <button class="submenu-toggle">打开子菜单</button>
  <!-- 子侧边栏 -->
  <div class="sub-sidebar">
    <ul class="sub-menu-list">
      <li>子菜单选项1</li>
      <li>子菜单选项2</li>
      <li>子菜单选项3</li>
    </ul>
  </div>
</div>

2. 关键CSS样式 #

用固定定位把主、子侧边栏放在屏幕左侧，子菜单默认平移到主侧边栏外面，展开时移回来：

.main-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  z-index: 100;
}

.sub-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 100vh;
  background-color: #f8f9fa;
  transform: translateX(-100%); /* 默认隐藏在主侧边栏左侧 */
  transition: transform 0.3s ease;
  z-index: 99;
}

/* 子菜单展开状态 */
.sub-sidebar.active {
  transform: translateX(260px); /* 移到主侧边栏右侧显示 */
}

3. JS交互逻辑 #

给触发按钮绑定点击事件，切换子菜单的active类就行：

const toggleBtn = document.querySelector('.submenu-toggle');
const subSidebar = document.querySelector('.sub-sidebar');

toggleBtn.addEventListener('click', () => {
  subSidebar.classList.toggle('active');
  // 顺便改按钮文字，提升体验
  toggleBtn.textContent = subSidebar.classList.contains('active') ? '关闭子菜单' : '打开子菜单';
});

React框架下的实现思路 #

如果用React，可以用状态管理来控制子菜单的显示/隐藏，代码更简洁：

import { useState } from 'react';

const Sidebar = () => {
  const [isSubSidebarOpen, setIsSubSidebarOpen] = useState(false);

  return (
    <div className="sidebar-wrapper">
      <div className="main-sidebar">
        <button 
          onClick={() => setIsSubSidebarOpen(!isSubSidebarOpen)}
          className="submenu-toggle"
        >
          {isSubSidebarOpen ? '收起子菜单' : '展开子菜单'}
        </button>
      </div>
      {/* 根据状态渲染子侧边栏 */}
      <div className={`sub-sidebar ${isSubSidebarOpen ? 'active' : ''}`}>
        <ul className="sub-menu-list">
          <li>子菜单选项A</li>
          <li>子菜单选项B</li>
        </ul>
      </div>
    </div>
  );
};

export default Sidebar;

样式直接复用上面的CSS就好，完全兼容。

额外小技巧 #

1. 如果需要点击页面其他区域自动收起子菜单，可以给document绑定点击事件，判断点击目标是否不在侧边栏内，然后关闭子菜单。
2. 要是不想自己写，很多UI组件库（比如Ant Design、Element Plus）都内置了多级侧边栏组件，比如AntD的Menu支持SubMenu嵌套，直接用就行，省不少事。

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