点击导航链接后Dropdown Menu同时展开又收起的问题排查求助

核心问题是空href的<a>标签触发了页面刷新，导致菜单刚显示就被页面重置回初始状态。以下是具体修复方案：

修复步骤 #

1. 阻止<a>标签的默认跳转行为 #

在点击事件中阻止浏览器的默认跳转动作，避免页面刷新：

修改JavaScript函数：

function drpdwnMenuFunc(e) {
  // 阻止默认跳转和事件冒泡
  e.preventDefault();
  e.stopPropagation();
  drpdwnMenu.classList.toggle("drpdwn-menu-active");
}

同时修改HTML中的onclick调用，传递事件参数：

<li onclick="drpdwnMenuFunc(event)" class="nav-items drpdwn">
  <a href="" class="nav-links nav-linkdrp">LEARN</a>
  <!-- 其他内容不变 -->
</li>

2. 优化空href问题（可选） #

直接将<a>标签的href设置为#，避免浏览器默认跳转逻辑：

<a href="#" class="nav-links nav-linkdrp">LEARN</a>

配合上述阻止默认行为的代码，可避免点击#导致页面滚动到顶部。

3. 点击外部区域关闭菜单（可选增强） #

如果需要点击菜单外区域自动关闭下拉菜单，添加以下代码：

document.addEventListener('click', function(e) {
  if (!drpdwnMenu.parentElement.contains(e.target)) {
    drpdwnMenu.classList.remove('drpdwn-menu-active');
  }
});

完整修复后的代码示例 #

JavaScript #

let drpdwnMenu = document.querySelector(".drpdwn-menu");

function drpdwnMenuFunc(e) {
  e.preventDefault();
  e.stopPropagation();
  drpdwnMenu.classList.toggle("drpdwn-menu-active");
}

// 点击外部关闭菜单
document.addEventListener('click', function(e) {
  if (!drpdwnMenu.parentElement.contains(e.target)) {
    drpdwnMenu.classList.remove('drpdwn-menu-active');
  }
});

HTML #

<ul class="navbar-nav">
  <li class="nav-items"><a href="" class="nav-links">HOME</a></li>
  <li onclick="drpdwnMenuFunc(event)" class="nav-items drpdwn">
    <a href="#" class="nav-links nav-linkdrp">LEARN</a>
    <i class="ri-arrow-down-s-fill"></i>
    <ul class="drpdwn-menu">
      <li class="drpdwn-item"><a href="">ABOUT</a></li>
      <li class="drpdwn-item"><a href="">FAQ</a></li>
      <li class="drpdwn-item"><a href="">BLOGS</a></li>
    </ul>
  </li>
  <li class="nav-items drpdwn">
    <a href="" class="nav-links">DISCOVER</a>
    <i class="ri-arrow-down-s-fill"></i>
  </li>
  <li class="nav-items"><a href="" class="nav-links">CONTACT</a></li>
</ul>

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