左侧垂直导航带弹出子菜单（点击触发）实现方案求助

HTML 结构 #

<div class="sidebar-nav">
  <div class="nav-item">首页</div>
  <div class="nav-item dropdown">
    <button class="dropdown-trigger">产品中心</button>
    <div class="dropdown-content">
      <a href="#">产品1</a>
      <a href="#">产品2</a>
      <a href="#">产品3</a>
    </div>
  </div>
  <div class="nav-item dropdown">
    <button class="dropdown-trigger">关于我们</button>
    <div class="dropdown-content">
      <a href="#">公司简介</a>
      <a href="#">团队成员</a>
    </div>
  </div>
</div>

<!-- 主内容区域 -->
<div class="main-content">
  <p>主内容区域，子菜单弹出时不会挤压这里的内容</p>
</div>

CSS 样式 #

/* 左侧导航基础样式 */
.sidebar-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100vh;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
}

.nav-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

/* 下拉触发器 */
.dropdown-trigger {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 12px 16px;
  cursor: pointer;
  font-size: inherit;
}

/* 子菜单样式 */
.dropdown-content {
  display: none;
  position: absolute;
  left: 100%; /* 从导航右侧边缘弹出 */
  top: 0;
  width: 200px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 999; /* 确保子菜单在最上层，不挤压主内容 */
  border: 1px solid #ddd;
}

.dropdown-content a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #eee;
}

.dropdown-content a:hover {
  background-color: #f0f0f0;
}

/* 主内容区域 */
.main-content {
  margin-left: 200px; /* 避开左侧导航 */
  padding: 20px;
}

原生 JavaScript 实现 #

// 获取所有下拉触发器和子菜单
const triggers = document.querySelectorAll('.dropdown-trigger');
const dropdowns = document.querySelectorAll('.dropdown-content');

// 给每个触发器绑定点击事件
triggers.forEach(trigger => {
  trigger.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发文档点击事件
    const content = trigger.nextElementSibling;
    // 切换当前子菜单的显示状态
    content.style.display = content.style.display === 'block' ? 'none' : 'block';
    
    // 关闭其他打开的子菜单
    dropdowns.forEach(drop => {
      if (drop !== content) {
        drop.style.display = 'none';
      }
    });
  });
});

// 点击文档其他区域关闭所有子菜单
document.addEventListener('click', () => {
  dropdowns.forEach(drop => {
    drop.style.display = 'none';
  });
});

jQuery 实现 #

$(document).ready(function() {
  // 下拉触发器点击事件
  $('.dropdown-trigger').click(function(e) {
    e.stopPropagation();
    const $content = $(this).next('.dropdown-content');
    $content.toggle();
    
    // 关闭其他子菜单
    $('.dropdown-content').not($content).hide();
  });
  
  // 点击文档其他区域关闭所有子菜单
  $(document).click(function() {
    $('.dropdown-content').hide();
  });
  
  // 阻止子菜单内的点击事件冒泡
  $('.dropdown-content').click(function(e) {
    e.stopPropagation();
  });
});

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