如何实现侧边菜单展开时推送下方菜单项而非覆盖？

核心思路 #

利用jQuery的slideToggle()方法实现菜单内容的平滑展开/收起，该方法通过动态改变元素高度触发布局重排，自然会推动下方元素下移，而非覆盖。

通用代码示例 #

HTML结构

<div class="sidebar">
  <div class="menu-item">
    <div class="menu-title">菜单1</div>
    <div class="menu-content">
      <p>子项1-1</p>
      <p>子项1-2</p>
    </div>
  </div>
  <div class="menu-item">
    <div class="menu-title">菜单2</div>
    <div class="menu-content">
      <p>子项2-1</p>
      <p>子项2-2</p>
    </div>
  </div>
  <div class="menu-item">
    <div class="menu-title">菜单3</div>
    <div class="menu-content">
      <p>子项3-1</p>
    </div>
  </div>
</div>

CSS基础样式

.sidebar {
  width: 260px;
  background-color: #f0f0f0;
}
.menu-title {
  padding: 12px 15px;
  background-color: #e0e0e0;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
  transition: background-color 0.2s;
}
.menu-title:hover {
  background-color: #d5d5d5;
}
.menu-content {
  display: none; /* 初始隐藏子内容 */
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

jQuery逻辑代码

$(function() {
  // 绑定菜单标题点击事件
  $('.menu-title').click(function() {
    // 获取当前菜单对应的子内容容器
    const $targetContent = $(this).next('.menu-content');
    
    // 平滑切换显示/隐藏，自动推动下方元素
    $targetContent.slideToggle(300);
    
    // 可选：开启手风琴模式（点击当前菜单时收起其他展开的菜单）
    // $('.menu-content').not($targetContent).slideUp(300);
  });
});

关键说明 #

• slideToggle()是核心：它会根据元素当前状态切换显示/隐藏，动画过程中改变元素高度，触发浏览器自动重排布局，从而让下方元素自然下移，不会出现覆盖问题。
• 手风琴模式：如果需要同一时间只展开一个菜单，取消上述代码中注释的slideUp()即可。
• 样式适配：可以根据自己的网站风格调整CSS，只要保证.menu-content初始为display: none即可。

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