Bootstrap 4点击图标展开左侧侧边栏菜单方案求助

基于你现有的侧边栏实现，只需调整HTML结构、补充CSS样式和修改JS逻辑，就能实现点击图标展开额外菜单的效果：

1. 调整HTML结构，添加子菜单容器 #

在原有侧边栏的菜单项中，嵌入子菜单元素，初始设置为隐藏：

<div class="sidebar">
  <!-- 菜单切换按钮 -->
  <button class="menu-toggle"><i class="bi bi-list"></i></button>
  
  <div class="sidebar-nav">
    <!-- 带二级菜单的主菜单项 -->
    <div class="nav-item">
      <a class="nav-link" href="#"><i class="bi bi-house"></i></a>
      <!-- 子菜单，初始隐藏 -->
      <div class="submenu d-none">
        <a href="#" class="submenu-item">首页子项1</a>
        <a href="#" class="submenu-item">首页子项2</a>
      </div>
    </div>
    
    <div class="nav-item">
      <a class="nav-link" href="#"><i class="bi bi-person"></i></a>
      <div class="submenu d-none">
        <a href="#" class="submenu-item">个人中心</a>
        <a href="#" class="submenu-item">账号设置</a>
      </div>
    </div>
    
    <!-- 其他菜单项 -->
  </div>
</div>

2. 补充CSS样式，控制布局与显示 #

添加子菜单样式，以及侧边栏展开时的显示规则：

/* 子菜单基础样式 */
.submenu {
  padding-left: 2rem;
  margin: 0.5rem 0;
}
.submenu-item {
  display: block;
  padding: 0.5rem 0;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}
.submenu-item:hover {
  color: #e0e0e0;
}

/* 侧边栏展开时，显示所有子菜单 */
.sidebar-expanded .submenu {
  display: block !important;
}

/* 保持原有侧边栏展开/收起的基础样式 */
.sidebar {
  width: 60px;
  background-color: #2c3e50;
  height: 100vh;
  position: fixed;
  transition: width 0.3s;
}
.sidebar-expanded {
  width: 220px;
}
.nav-link {
  color: #fff;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

3. 修改JS逻辑，实现切换交互 #

给菜单切换按钮添加事件，切换侧边栏展开状态，同时控制子菜单显示：

const sidebar = document.querySelector('.sidebar');
const menuToggle = document.querySelector('.menu-toggle');

// 点击切换按钮展开/收起侧边栏
menuToggle.addEventListener('click', () => {
  sidebar.classList.toggle('sidebar-expanded');
});

// 可选：点击单个菜单项单独展开/收起其子菜单
document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('click', (e) => {
    e.stopPropagation(); // 避免触发侧边栏整体切换
    const submenu = item.querySelector('.submenu');
    submenu?.classList.toggle('d-none');
  });
});

这样修改后，点击侧边栏的切换图标，侧边栏会展开并显示所有预设的额外子菜单；如果需要单独点击菜单项展开对应子菜单，也可以启用可选的JS逻辑。

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