侧边栏Dropdown菜单无法关闭问题求助（附代码）

问题根源 #

你的代码存在几个关键错误，导致下拉菜单无法正常关闭：

• 外部点击关闭逻辑里类名完全不匹配：你用了.dropbtn（实际按钮类是dropdown-btn），查找的是dropdown-content（实际下拉容器是dropdown-container），且原逻辑依赖show类，但你的代码是直接修改display样式，这部分代码完全不生效。
• 点击新的下拉按钮时，没有自动关闭已展开的其他下拉菜单。

修复后的完整代码 #

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav">
  <button class="dropdown-btn">Projects and Exhibitions</button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <button class="dropdown-btn">Curatorial</button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#Information">Information</a>
</div>

CSS

body {
  font-family: "Lato", sans-serif;
}

/* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: pink;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Dropdown container (hidden by default) */
.dropdown-container {
  display: none;
  background-color: transparent;
  padding-left: 8px;
}

/* Active dropdown button style */
.dropdown-btn.active {
  color: pink;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

（注：修复了CSS里多余的闭合大括号，把无效的background-color: none改成transparent，补充了active按钮的样式让选中状态更明显）

JavaScript

// 获取所有下拉按钮
const dropdownBtns = document.getElementsByClassName("dropdown-btn");

// 给每个按钮绑定点击事件
for (let btn of dropdownBtns) {
  btn.addEventListener("click", function() {
    // 先关闭所有其他下拉菜单
    closeAllDropdowns(this);
    // 切换当前按钮的active状态和下拉内容的显示
    this.classList.toggle("active");
    const dropdownContent = this.nextElementSibling;
    dropdownContent.style.display = dropdownContent.style.display === "block" ? "none" : "block";
  });
}

// 点击页面其他区域关闭所有下拉
window.addEventListener('click', function(event) {
  // 如果点击的不是下拉按钮，也不是下拉容器内部的元素
  if (!event.target.matches('.dropdown-btn') && !event.target.closest('.dropdown-container')) {
    closeAllDropdowns();
  }
});

// 封装关闭所有下拉的函数
function closeAllDropdowns(excludeBtn = null) {
  for (let btn of dropdownBtns) {
    // 如果有排除的按钮，跳过它
    if (btn !== excludeBtn) {
      btn.classList.remove("active");
      const content = btn.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      }
    }
  }
}

修复说明 #

1. 封装closeAllDropdowns函数，统一处理关闭下拉逻辑，点击新按钮时自动关闭其他下拉。
2. 修正了外部点击判断的类名，同时判断点击元素是否在下拉容器内，避免点击下拉链接时误关闭。
3. 修复了CSS语法错误，补充了active按钮样式，提升交互反馈。

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