JS实现Navbar开关功能失效求助：函数触发但导航栏无响应

问题描述 #

在新项目中用JavaScript实现导航栏开关功能，DevTools显示触发开关的函数已执行，但导航栏始终没有打开或关闭的视觉效果。相同代码在旧项目中可正常运行，无法定位问题根源。

相关代码 #

JavaScript代码 #

let Menupopupup = document.getElementById("dropdownheadernav");
function opendropdownheadernav() {
  Menupopupup.classList.add("Openmenudrops");
  document.body.style.overflow = "hidden";
}

function closedropdownheadernav() {
  Menupopupup.classList.remove("Openmenudrops");
  document.body.style.overflow = "auto";
}

HTML代码 #

<nav class="firstnavigationbar">
  <button id="Showscroll" type="submit" class="barsbutton" onclick="opendropdownheadernav()">
    <div class="barbtnimagecontainer">
      <img class="barbtn"
        src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
        height="23"
        width="22"
        alt=""
      />
    </div>
  </button>
  <ul class="firstunorderedlist" id="dropdownheadernav">
    <button id="Closescroll" type="button" class="closemenubutton" onclick="closedropdownheadernav()">
      <span class="closemenuspan">&#x2715</span>
    </button>
    <!-- 导航栏列表项 -->
  </ul>
</nav>

CSS代码 #

.firstunorderedlist {
  margin-top: -40px;
  display: none;
  color: #1e2329;
  list-style: none;
  line-height: 3.5;
  background-color: #fff;
  width: 320px;
  overflow: hidden;
}

核心问题 #

你的代码中缺少.Openmenudrops类对应的CSS规则。导航栏默认通过.firstunorderedlist的display: none隐藏，JS函数虽然能成功给元素添加/移除Openmenudrops类，但没有CSS规则改变元素的display属性，所以导航栏不会显示。

旧项目正常是因为旧项目中存在Openmenudrops类的CSS定义，新项目遗漏了这部分代码。

修复方案 #

1. 补充Openmenudrops类的CSS规则 #

在CSS中添加以下代码，让导航栏在添加类后显示：

/* 优先级高于默认的.firstunorderedlist规则 */
.firstunorderedlist.Openmenudrops {
  display: block; /* 根据布局需求，也可以用flex等其他值 */
}

2. 可选：简化JS代码（优化） #

可以用classList.toggle()合并两个函数，减少冗余：

const menuPopup = document.getElementById("dropdownheadernav");
function toggleDropdownHeaderNav() {
  const isMenuOpen = menuPopup.classList.toggle("Openmenudrops");
  document.body.style.overflow = isMenuOpen ? "hidden" : "auto";
}

同时修改HTML中按钮的onclick事件：

<button id="Showscroll" type="submit" class="barsbutton" onclick="toggleDropdownHeaderNav()">
<!-- ... -->
<button id="Closescroll" type="button" class="closemenubutton" onclick="toggleDropdownHeaderNav()">

额外排查点 #

• 确认页面中没有重复的dropdownheadernav ID，否则getElementById会选择第一个匹配元素，导致功能异常
• 检查CSS优先级：如果添加规则后仍不生效，可以临时添加!important测试（不推荐长期使用）：

  .firstunorderedlist.Openmenudrops {
    display: block !important;
  }
  

• 确保JS代码在DOM加载完成后执行：将JS代码放在</body>标签前，或者用DOMContentLoaded事件包裹：

  document.addEventListener('DOMContentLoaded', function() {
    const menuPopup = document.getElementById("dropdownheadernav");
    // 函数定义...
  });
  

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