移动端侧边菜单展开时隐藏主内容div的实现方案

数据老陈

2026-7-8

解决方案

要实现移动端侧边菜单展开时隐藏主内容，可借助Bootstrap Collapse组件的事件监听来控制主内容的显示状态，具体步骤如下：

1. 为主内容容器添加ID

修改主内容的div标签，增加唯一ID以便JS选择：

<!-- main content -->
<div id="main-content-container" class="col-auto container-fluid d-flex main-content p-0" style="flex-grow: 1">
  <div class="container-fluid d-sm-inline m-0 pb-2">
    <iframe id="main" src="formlar/tab.html" frameborder="0" width="100%" height="95%"></iframe>
  </div>
</div>

2. 添加JavaScript事件监听

通过监听Bootstrap Collapse的shown.bs.collapse和hidden.bs.collapse事件，控制主内容的显示与隐藏：

// 监听所有子菜单的折叠/展开事件
document.querySelectorAll('#menu .collapse').forEach(collapseEl => {
  // 菜单展开时隐藏主内容
  collapseEl.addEventListener('shown.bs.collapse', () => {
    document.getElementById('main-content-container').classList.add('d-none');
  });

  // 菜单折叠时，检查是否所有子菜单都已收起，是则显示主内容
  collapseEl.addEventListener('hidden.bs.collapse', () => {
    const allCollapsed = Array.from(document.querySelectorAll('#menu .collapse'))
      .every(el => !el.classList.contains('show'));
    if (allCollapsed) {
      document.getElementById('main-content-container').classList.remove('d-none');
    }
  });
});

3. 优化移动端CSS（可选）

补充CSS确保主内容隐藏时完全不占用空间：

@media screen and (max-width: 767px) {
  #menu1,
  #menu2,
  #menu3,
  #menu4,
  #menu5 {
    text-align: center;
    width: 100vw;
    font-size: 16px !important;
  }

  .main-content.d-none {
    display: none !important;
  }
}