点击控制下拉菜单异常：无法关闭当前已打开的下拉列表

问题描述 #

实现了一组下拉菜单，需求为：

• 点击某一下拉按钮时，关闭其他所有下拉列表
• 若当前下拉列表已打开，则点击按钮将其关闭

目前第一部分功能正常，但按钮无法关闭当前已打开的下拉列表，原代码如下：

原JavaScript代码 #

const dropdownBtns = document.querySelectorAll('.dropdown-btn');
const dropdownLists = document.querySelectorAll('.dropdown-list');

dropdownBtns.forEach(function(dropdownBtn) {
  dropdownBtn.addEventListener('click', function() {
    dropdownLists.forEach(function(dropdownList) {
      if (dropdownList !== this.nextElementSibling) {
        dropdownList.style.display = 'none';
      }
    });
    this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'block' ? 'none' : 'block';
    
  });
});

原CSS代码 #

.container {
  display: flex;
  gap: 50px;
}

.dropdown-list {
  display: none;
}

原HTML代码 #

<div class="container">
  
  <div class="dropdown">
    <button class="dropdown-btn">Dropdown 1</button>
    <ul class="dropdown-list">
      <li><input type="checkbox" id="item-1"> <label for="item-1">Item 1</label></li>
      <li><input type="checkbox" id="item-2"> <label for="item-2">Item 2</label></li>
      <li><input type="checkbox" id="item-3"> <label for="item-3">Item 3</label></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="dropdown-btn">Dropdown 2</button>
    <ul class="dropdown-list">
      <li><input type="checkbox" id="item-4"> <label for="item-4">Item 4</label></li>
      <li><input type="checkbox" id="item-5"> <label for="item-5">Item 5</label></li>
      <li><input type="checkbox" id="item-6"> <label for="item-6">Item 6</label></li>
    </ul>
  </div>
 
</div>

问题原因 #

核心问题是回调函数中的this指向错误：
在dropdownLists.forEach的回调函数内部，this默认指向全局对象（浏览器中为window），而非触发点击事件的按钮。这导致this.nextElementSibling为undefined，因此所有下拉列表都会被设置为display: none，之后代码又强制将当前列表设为display: block，最终表现为无法关闭当前列表。

另外，直接操作style.display还存在潜在问题：初始状态下，元素的display: none是通过CSS类定义的，而非内联样式，此时element.style.display为空字符串，可能导致状态判断逻辑异常。

修复方案 #

方案1：修正this指向并保留style操作 #

先将当前按钮对应的下拉列表存储到变量中，避免在forEach回调中依赖this：

const dropdownBtns = document.querySelectorAll('.dropdown-btn');
const dropdownLists = document.querySelectorAll('.dropdown-list');

dropdownBtns.forEach(function(dropdownBtn) {
  dropdownBtn.addEventListener('click', function() {
    // 存储当前按钮对应的下拉列表
    const currentDropdown = this.nextElementSibling;
    // 关闭其他所有下拉列表
    dropdownLists.forEach(function(dropdownList) {
      if (dropdownList !== currentDropdown) {
        dropdownList.style.display = 'none';
      }
    });
    // 切换当前下拉列表的显示状态
    currentDropdown.style.display = currentDropdown.style.display === 'block' ? 'none' : 'block';
  });
});

方案2：使用CSS类控制状态（推荐） #

用类来管理显示/隐藏状态，代码更简洁健壮，避免内联样式的判断问题：

修改后的CSS

.container {
  display: flex;
  gap: 50px;
}

.dropdown-list {
  display: none;
}
/* 添加active类控制显示 */
.dropdown-list.active {
  display: block;
}

修改后的JavaScript

const dropdownBtns = document.querySelectorAll('.dropdown-btn');
const dropdownLists = document.querySelectorAll('.dropdown-list');

dropdownBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    const currentList = this.nextElementSibling;
    // 关闭其他下拉列表
    dropdownLists.forEach(list => {
      if (list !== currentList) {
        list.classList.remove('active');
      }
    });
    // 切换当前列表的显示状态
    currentList.classList.toggle('active');
  });
});

说明 #

方案2中使用classList.toggle('active')可以直接切换类的存在状态，无需手动判断显示状态，逻辑更清晰，也避免了内联样式的兼容性问题。

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