Bootstrap中导航栏折叠时移除.bgGradient类的实现方法

刚好之前碰到过类似的需求，给你几个实用的方案，按需选就行～

方案1：用Bootstrap内置事件（推荐，适配Bootstrap Navbar） #

如果你的Navbar是基于Bootstrap搭建的，它本身就带了折叠相关的触发事件，我们直接监听这些事件来动态切换类就好：

// 拿到折叠面板的DOM元素
const navbarCollapse = document.querySelector('.navbar-collapse');

// 展开时给Navbar加上渐变类
navbarCollapse.addEventListener('shown.bs.collapse', function() {
  document.querySelector('.navbar').classList.add('bgGradient');
});

// 折叠时把渐变类去掉
navbarCollapse.addEventListener('hidden.bs.collapse', function() {
  document.querySelector('.navbar').classList.remove('bgGradient');
});

这个方法能精准对应Navbar的展开/折叠状态，不会有延迟或者判断不准的问题。

方案2：原生JS监听窗口大小（通用型方案） #

要是你没用Bootstrap，或者想自己控制逻辑，可以通过监听窗口尺寸变化来判断Navbar的状态：

function adjustNavbarGradient() {
  const navbar = document.querySelector('.navbar');
  // 这里的768px是Bootstrap默认的折叠断点，你可以改成自己CSS里的断点值
  if (window.innerWidth >= 768) {
    navbar.classList.add('bgGradient');
  } else {
    navbar.classList.remove('bgGradient');
  }
}

// 页面加载先执行一次，确保初始状态正确
adjustNavbarGradient();
// 窗口大小变化时实时调整
window.addEventListener('resize', adjustNavbarGradient);

方案3：纯CSS媒体查询（最简单，不用写JS） #

如果你的Navbar折叠是靠CSS媒体断点控制的，那直接用媒体查询来控制渐变的显示就完事了，连JS都不用写：

.navbar {
  margin: -30px 0 15px 0;
  /* 保留你原来的其他样式 */
}

/* 当屏幕宽度达到展开断点时，启用渐变背景 */
@media (min-width: 768px) {
  .navbar.bgGradient {
    background: linear-gradient(to right, #你的起始色, #你的结束色);
    /* 这里放你的渐变样式 */
  }
}

只要给Navbar默认加上bgGradient类，CSS会自动在屏幕小于断点（Navbar折叠）时不生效渐变，大于断点（Navbar展开）时生效，超级省心。

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