JavaScript下拉菜单绑定a标签时不显示问题排查

问题描述 #

点击带有.dropdown类的<a>标签时，下拉列表（.dropdown-list）未显示，但通过开发者工具能看到active类已成功添加到列表元素上。将.dropdown类移到父级<li>标签时功能正常，移回<a>标签则失效。

问题原因 #

1. CSS选择器优先级冲突 #

当前CSS中，.dropdown-list的隐藏规则是：

nav ul li .dropdown-list {
  display: none;
}

而激活类的显示规则是：

.active {
  display: block;
}

根据CSS优先级计算，nav ul li .dropdown-list的权重（1个类选择器 + 3个元素选择器，权重值103）高于.active（1个类选择器，权重值100），因此即使添加了active类，display: none的规则仍会生效，列表无法显示。

2. HTML标签未闭合 #

第一个下拉列表的<div class="dropdown-list">标签未闭合，导致DOM结构异常，可能干扰元素的选择与渲染。

3. 内联元素的定位局限性 #

带有.dropdown类的<a>标签默认是inline元素，虽然可以设置position: relative，但内联元素的布局特性可能导致绝对定位的下拉列表参考容器不符合预期（非本次问题核心原因，但优化后更稳定）。

解决方案 #

步骤1：提升激活类的CSS优先级 #

修改active类的选择器，使其权重高于.dropdown-list的默认规则：

.dropdown-list.active {
  display: block;
}

该选择器的权重为2个类选择器（权重值200），会覆盖原有的display: none规则。

步骤2：修复HTML标签闭合 #

补全第一个下拉列表的</div>标签：

<li>
  <a href="#" class="dropdown">About Us</a>
  <div class="dropdown-list">
    <a href="#">Who We Are</a>
    <a href="#">What We Do</a>
    <a href="#">Our Policies</a>
    <a href="#">FAQ</a>
  </div> <!-- 补全闭合标签 -->
</li>

步骤3：优化内联元素的布局（可选） #

将<a>标签的display改为inline-block，确保定位容器的布局更稳定：

nav ul li a.dropdown {
  display: inline-block;
}

修改后的完整代码 #

JavaScript（无需修改） #

const dropdown = document.querySelectorAll(".dropdown");

dropdown.forEach(dropdown => {
  dropdown.addEventListener('click', () => {
    const dropdownList = dropdown.nextElementSibling;
    dropdownList.classList.toggle('active');
  });
});

CSS #

:root {
  --font: 'Poppins', sans-serif;
  --primary-color: rgb(4, 228, 202);
  --dark: rgb(0, 24, 21);
  --faint: rgb(215, 255, 250);
  --grayish: rgb(155, 171, 169);
  --neutral-light: #fff;
  --neutral-dark: #000;
}

body {
  font-family: var(--font);
}

a {
  text-decoration: none;
  color: inherit;
}

nav {
  background-color: var(--dark);
  display: flex;
  justify-content: center;
  align-items: center;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  padding: 1rem;
  margin: 0;
}

nav ul li a {
  display: inline;
  color: var(--neutral-light);
  transition: 0.3s ease-in;
}

nav ul li a:hover {
  color: var(--primary-color);
}

nav ul li .dropdown {
  position: relative;
  display: inline-block; /* 新增，优化布局 */
}

nav ul li .dropdown-list {
  position: absolute;
  box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.3);
  background-color: var(--neutral-light);
  z-index: 1;
  display: none;
}

nav ul li .dropdown-list a {
  display: inline-block;
  padding: .5rem 1rem;
  color: var(--dark);
  transition: 0.3s ease-in;
}

/* 修改激活类选择器 */
.dropdown-list.active {
  display: block;
}

HTML #

<nav>
  <ul id="menu">
    <li><a href="#">Home</a></li>

    <li>
      <a href="#" class="dropdown">About Us</a>
      <div class="dropdown-list">
        <a href="#">Who We Are</a>
        <a href="#">What We Do</a>
        <a href="#">Our Policies</a>
        <a href="#">FAQ</a>
      </div>
    </li>
    <li>
      <a href="#" class="dropdown">Services</a>
      <div class="dropdown-list">
        <a href="#">IT Consultancy</a>
        <a href="#">Sofware Development</a>
        <a href="#">Website Designing</a>
        <a href="#">Graphics and Game Design</a>
        <a href="#">Research</a>
      </div>
    </li>

    <li><a href="#">Team</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

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