使用toggle切换按钮时如何正确覆盖CSS属性解决导航显隐问题

问题复现代码 #

交互逻辑JS #

const toggleButton = document.getElementById("toggle-button");
const navList = document.getElementById("nav-list");

toggleButton.addEventListener('click', () => {
  navList.classList.toggle('active');
})

样式代码CSS #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: plum;
  font-family: sans-serif;
}

header {
  width: 100vw;
  height: 100px;
}

.navbar {
  background-color: darksalmon;
  display: flex;
  color: white;
  justify-content: space-around;
  height: 100px;
  align-items: center;
}

.nav-list {
  list-style: none;
}

.nav-list .list-item {
  display: inline-block;
}

.menu {
  display: none;
}

.imgLogo {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  margin-top: 15px;
  margin-left: 15px;
}

.active {
  display: block;
}


@media only screen and (max-width: 490px) {
  .navbar {
    flex-direction: column;
  }
  .menu {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .nav-list {
    width: 100%;
    background-color: darksalmon;
    padding-top: 240px;
    display: none;
  }
  .nav-list .list-item {
    display: block;
    border-top: 1px solid white;
    padding: 10px;
  }
  .nav-list .list-item:last-child {
    border-bottom: 1px solid white;
  }
}

结构代码HTML #

<header>
  <nav class="navbar">
    <div class="menuLogo">
      <img src="imgs/logo-desktop.svg" class="imgLogo">
    </div>
    <ul class="nav-list" id="nav-list">
      <li class="list-item">Home</li>
      <li class="list-item">Menu</li>
      <li class="list-item">Rewards</li>
      <li class="list-item">Gift Cards</li>
      <li class="list-item">Stores</li>
    </ul>
    <div class="menu" id="toggle-button">
      <img src="imgs/menu-burguer-open.svg">
    </div>
  </nav>
</header>

故障原因 #

问题出在CSS优先级与规则加载顺序的匹配逻辑上：

• 激活状态的样式选择器为.active，属于单类选择器，优先级权重值为0,1,0
• 移动端媒体查询中用来隐藏导航的选择器为.nav-list，同样是单类选择器，优先级权重值也是0,1,0
• CSS的样式覆盖规则明确：当两个选择器优先级完全相同时，代码中书写位置更靠后的规则，会覆盖位置靠前的同属性规则。你代码里的.active规则写在媒体查询块之前，媒体查询内的.nav-list { display: none }书写位置更靠后，因此就算元素成功加上了active类，最终生效的还是后写入的display: none，导航自然无法显示。

修复方法 #

最稳妥的修复方案操作如下：

• 删除全局位置的.active { display: block; }规则，避免多余样式干扰
• 在max-width: 490px的媒体查询代码块内，新增双类选择器.nav-list.active的激活规则，这个选择器的权重为0,2,0，高于单类选择器.nav-list的0,1,0，可以稳定覆盖隐藏样式

修改后媒体查询部分代码如下：

@media only screen and (max-width: 490px) {
  .navbar {
    flex-direction: column;
  }
  .menu {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .nav-list {
    width: 100%;
    background-color: darksalmon;
    padding-top: 240px;
    display: none;
  }
  /* 新增激活状态规则 */
  .nav-list.active {
    display: block;
  }
  .nav-list .list-item {
    display: block;
    border-top: 1px solid white;
    padding: 10px;
  }
  .nav-list .list-item:last-child {
    border-bottom: 1px solid white;
  }
}

修改保存后，点击汉堡按钮即可正常控制导航列表的显示/隐藏。

可选替代方案：如果你不想修改选择器，也可以把原有的.active { display: block; }规则移动到整个CSS文件的最末尾，靠书写顺序覆盖前面的样式，但这种方式稳定性较差，后续新增其他同权重规则时很容易再次出现覆盖问题，更推荐使用提高选择器优先级的方案。

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