如何使用JavaScript实现多个下拉按钮的触发功能？

问题分析 #

你的原始代码仅通过ID选择了第一个下拉按钮、菜单和箭头，导致第二个按钮无法触发任何事件。要支持多个下拉按钮，需要采用类选择器+DOM遍历的方式，让代码能够动态关联每个按钮与其对应的菜单和箭头，同时保留点击外部关闭下拉的功能。

完整修正代码 #

JavaScript

// 选择所有下拉按钮
const dropdownBtns = document.querySelectorAll('.dropdown-btn');

// 通用的下拉切换函数，接收目标菜单和箭头元素
const toggleDropdown = (menu, arrow) => {
  menu.classList.toggle('dropdown-show');
  arrow.classList.toggle('arrow-rotated');
};

// 为每个按钮绑定点击事件
dropdownBtns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.stopPropagation();
    
    // 获取当前按钮内的箭头元素
    const arrow = btn.querySelector('.bx');
    // 获取当前按钮的下一个兄弟元素（即对应的下拉菜单）
    const menu = btn.nextElementSibling;
    
    // 先关闭其他已打开的下拉菜单
    document.querySelectorAll('.dropdown-show').forEach(openMenu => {
      if (openMenu !== menu) {
        openMenu.classList.remove('dropdown-show');
        openMenu.previousElementSibling.querySelector('.bx').classList.remove('arrow-rotated');
      }
    });
    
    // 切换当前下拉菜单的状态
    toggleDropdown(menu, arrow);
  });
});

// 点击页面其他区域关闭所有下拉菜单
document.documentElement.addEventListener('click', () => {
  document.querySelectorAll('.dropdown-show').forEach(menu => {
    menu.classList.remove('dropdown-show');
    menu.previousElementSibling.querySelector('.bx').classList.remove('arrow-rotated');
  });
});

CSS

.dropdown-list {
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);
}

.dropdown-list a {
  display: flex;
  align-items: center;
  column-gap: var(--gap);
  padding: 0.8rem 1rem;
  text-decoration: none;
  color: black;
}

.dropdown-list a:hover {
  background-color: #e8e8e8;
}

.dropdown-show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0rem);
}

/* 修改箭头旋转的类名，避免覆盖原有图标类 */
.arrow-rotated {
  transform: rotate(180deg);
  transition: 0.2s ease;
  font-weight: bold;
}

HTML

<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />

<button class="dropdown-btn">
  LISTEN NOW
  <i class='bx bxs-chevron-up'></i>
</button>
<div class="dropdown-list">
  <a href="#">Apple</a>
  <a href="#">Spotify</a>
</div>

<br><br><br><br><br><br>

<button class="dropdown-btn">
  LISTEN NOW
  <i class='bx bxs-chevron-up'></i>
</button>
<div class="dropdown-list">
  <a href="#">Apple</a>
  <a href="#">Spotify</a>
</div>

关键优化点 #

1. 放弃硬编码ID：使用querySelectorAll('.dropdown-btn')选择所有按钮，不再依赖单一ID，支持任意数量的下拉组件。
2. DOM动态关联：通过btn.querySelector('.bx')获取当前按钮内的箭头，btn.nextElementSibling获取对应的下拉菜单，无需为每个元素设置唯一ID。
3. 关闭其他下拉：点击新按钮时自动关闭已打开的下拉菜单，提升用户体验。
4. 修正箭头类名：将原dropdown-arrow改为arrow-rotated，避免覆盖图标原有类导致样式失效。

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