Bootstrap导航栏优化：移动端关闭时透明，展开时显灰色背景

这个需求很常见，我给你提供两种可行的方案，你可以根据自己的浏览器兼容需求和代码习惯来选择：

方案一：纯CSS实现（利用Bootstrap折叠状态类） #

这种方案不需要额外JS，依赖现代浏览器支持的:has()选择器，代码更简洁：

首先，我们针对不同屏幕断点设置导航栏的背景样式：

/* 桌面端（lg及以上）保持灰色背景 */
@media (min-width: 992px) {
  .header.bg-neptun {
    background-color: #你的灰色值 !important; /* 替换成你bg-neptun类的实际背景色 */
  }
}

/* 移动端默认透明 */
@media (max-width: 991.98px) {
  .header.bg-neptun {
    background-color: transparent !important;
  }
  /* 当折叠菜单展开时，导航栏恢复灰色背景 */
  .header.bg-neptun:has(.navbar-collapse.show) {
    background-color: #你的灰色值 !important;
  }
}

注意：:has()选择器是CSS4特性，现代浏览器（Chrome 101+、Firefox 121+等）都支持，如果需要兼容旧版浏览器，建议用方案二。

方案二：结合JavaScript监听折叠事件 #

这种方案兼容性更好，通过监听Bootstrap折叠组件的事件来动态切换导航栏背景类：

第一步：调整HTML结构 #

先暂时移除导航栏默认的bg-neptun类，后续用JS控制它的显示：

<nav class="navbar header navbar-expand-lg navbar-neptun">
  <div class="container">
    <div class="row tablet_header" style="justify-content: center;">
      <div class="col-sm-8 col-md-12 col-lg-12 topNavigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed header_button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            &#9776;
          </button>
        </div>
        <!-- 记得补充折叠菜单的容器，否则折叠功能失效 -->
        <div id="navbar" class="collapse navbar-collapse">
          <!-- 这里放你的导航链接 -->
        </div>
      </div>
    </div>
  </div>
</nav>

第二步：添加JavaScript代码 #

监听折叠组件的展开/收起事件，同时处理窗口大小变化的情况：

// 获取核心元素
const navbar = document.querySelector('.header');
const collapseMenu = document.getElementById('navbar');

// 菜单展开时添加灰色背景类
collapseMenu.addEventListener('show.bs.collapse', () => {
  navbar.classList.add('bg-neptun');
});

// 菜单收起时，仅在移动端移除背景类
collapseMenu.addEventListener('hide.bs.collapse', () => {
  if (window.innerWidth < 992) {
    navbar.classList.remove('bg-neptun');
  }
});

// 处理窗口大小切换的情况
window.addEventListener('resize', () => {
  if (window.innerWidth >= 992) {
    // 桌面端强制显示灰色背景
    navbar.classList.add('bg-neptun');
  } else {
    // 移动端：菜单收起则透明，展开则保持灰色
    !collapseMenu.classList.contains('show') && navbar.classList.remove('bg-neptun');
  }
});

// 页面加载时初始化样式
window.addEventListener('load', () => {
  if (window.innerWidth >= 992) {
    navbar.classList.add('bg-neptun');
  } else {
    !collapseMenu.classList.contains('show') && navbar.classList.remove('bg-neptun');
  }
});

补充提示 #

• 如果你不想修改原有bg-neptun类，也可以新建一个bg-mobile-active类来单独控制展开时的背景，避免样式冲突。
• 确保你的#navbar容器带有collapse navbar-collapse类，这是Bootstrap折叠组件的必要结构。

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