点击外部无法关闭Dropdown菜单：Fontawesome用户图标问题求助

问题根源 #

1. 元素获取错误：getElementsByClassName返回的是HTMLCollection集合，不是单个DOM元素，直接调用classList会报错，导致下拉切换和关闭逻辑失效。
2. 事件目标判断不全：点击FontAwesome图标时，event.target指向的是<i>标签，不是绑定了#superior的<a>标签，所以会触发外部点击的关闭逻辑，出现点击图标时alert触发、下拉菜单反复切换的问题。

修复步骤 #

1. 修正元素获取方式

把getElementsByClassName换成getElementById（因为submenu有唯一id）或者querySelector，确保拿到单个DOM元素：

// 替换原来的元素获取代码
const submenu = document.getElementById('submenu');

2. 完善事件目标判断逻辑

用closest()方法判断点击目标是否属于#superior元素内部，这样不管点击的是<a>本身还是里面的<i>图标，都能识别为点击了触发按钮：

window.onclick = function(event) {
  // 判断点击目标是否在#superior内部
  if (!event.target.closest('#superior')) {
    if (submenu.classList.contains('show')) {
      submenu.classList.remove('show');
    }
  }
}

3. 阻止a标签默认跳转

点击触发按钮时，阻止<a>标签的默认跳转行为，避免页面刷新：

function dropdown(event) {
  // 阻止默认跳转
  event.preventDefault();
  const submenu = document.getElementById('submenu');
  submenu.classList.toggle('show');
}

同时在HTML里给onclick传event参数：

<a onclick="dropdown(event)" id="superior" href="#" class="nav-link"><i class="fa-solid fa-user"></i></a>

4. 清理重复CSS代码

你的CSS里有重复的全局样式和选择器，删掉重复部分，保持代码整洁。

完整修复代码 #

JavaScript

function dropdown(event) {
  event.preventDefault();
  const submenu = document.getElementById('submenu');
  submenu.classList.toggle('show');
}

const submenu = document.getElementById('submenu');
window.onclick = function(event) {
  if (!event.target.closest('#superior')) {
    if (submenu.classList.contains('show')) {
      submenu.classList.remove('show');
    }
  }
}

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
}

header {
  background-color: #fff;
}

li {
  list-style: none;
}

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

.navbar {
  min-height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  z-index: 2;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  gap: 50px;
}

.nav-branding {
  font-size: 2em;
  margin: 0;
}

.nav-item {
  line-height: 25px;
  margin-top: 25px;
}

.nav-link {
  transition: 0.5s ease;
  font-size: 1.2rem;
}

.submenu {
  display: none;
  position: absolute;
  z-index: 2;
  line-height: 50px;
  font-size: 1.2rem;
  font-weight: 600;
  width: 295px;
  transform: translateX(-79%);
  text-align: center;
  min-height: 100px;
  background-color: black;
}

.sub-link {
  color: white;
}

.show {
  display: block;
}

HTML

<script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>
<header>
  <nav class="navbar">
    <a href="#" class="logo">logo</a>
    <ul class="nav-menu">
      <li class="nav-item">
        <a href="#" class="nav-link">link</a>
      </li>
      <li class="nav-item user-menu">
        <a onclick="dropdown(event)" id="superior" href="#" class="nav-link"><i class="fa-solid fa-user"></i></a>
        <ul id="submenu" class="submenu">
          <li>
            <a class="sub-link" href="#">link</a>
          </li>
          <li>
            <a class="sub-link" href="#">link</a>
          </li>
          <li>
            <a class="sub-link" href="#">link</a>
          </li>
          <li>
            <a class="sub-link" href="#">link</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</header>
</body>
</html>

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