点击按钮关闭其他下拉菜单并切换当前显隐状态的实现方法如下：实现思路监听点击事件：当用户点击下拉按钮时，触发事件。隐藏所有下拉菜单：在点击事件中，先将所有其他下拉菜单隐藏。切换当前下拉菜单的显隐状态：判断当前下拉菜单是否显示，如果显示则隐藏，否则显示。示例代码（使用HTML+JavaScript）HTML结构菜单1[选项1](#)[选项2](#)菜单2[选项A](#)[选项B](#)JavaScri

本篇文章向大家介绍《点击按钮关闭其他下拉菜单并切换当前显隐状态的实现方法如下：实现思路监听点击事件：当用户点击下拉按钮时，触发事件。隐藏所有下拉菜单：在点击事件中，先将所有其他下拉菜单隐藏。切换当前下拉菜单的显隐状态：判断当前下拉菜单是否显示，如果显示则隐藏，否则显示。示例代码（使用 HTML + JavaScript）HTML 结构

本文介绍一种基于 CSS 类控制的健壮下拉菜单交互方案：通过为父容器添加 `is-active` 类统一管理显隐逻辑，避免 DOM 操作混乱，同时支持样式扩展与多级联动。

在构建多个并列下拉组件时，常见的需求是：点击任一按钮，仅展开对应下拉列表，同时收起其他已展开的列表；若再次点击同一按钮，则收起自身列表。原始代码尝试直接操作 display 样式，但因 this.nextElementSibling 在闭包中引用错位、且未正确区分“当前触发元素”与“遍历目标”，导致无法关闭已打开的当前下拉菜单。

推荐采用 语义化、可维护性更强的类名驱动方案：以 .dropdown 为功能单元，通过切换 is-active 类控制状态，将展示逻辑完全交由 CSS 处理，JavaScript 仅负责状态协调。

✅ 推荐实现（简洁 & 可扩展）

const dropdownWrappers = document.querySelectorAll('.dropdown');

dropdownWrappers.forEach(wrapper => {
  const btn = wrapper.querySelector('.dropdown-btn');
  btn.addEventListener('click', () => {
    // 遍历所有下拉容器：当前项切换 is-active，其余移除
    dropdownWrappers.forEach(el => {
      el.classList[el === wrapper ? 'toggle' : 'remove']('is-active');
    });
  });
});

配套 CSS（利用层叠关系精准控制）：

.dropdown .dropdown-list {
  display: none;
}

.dropdown.is-active .dropdown-list {
  display: block; /* 或使用 flex / grid 等更现代布局 */
}

HTML 结构保持清晰语义（注意： 包裹 <input> 更符合无障碍规范）：

<div class="container">
  <div class="dropdown">
    <button class="dropdown-btn">Dropdown 1</button>
    <ul class="dropdown-list">
      <li><label>&lt;input type=&quot;checkbox&quot; name=&quot;c1&quot; value=&quot;1&quot;&gt; Item 1</label></li>
      <li><label>&lt;input type=&quot;checkbox&quot; name=&quot;c1&quot; value=&quot;2&quot;&gt; Item 2</label></li>
      <li><label>&lt;input type=&quot;checkbox&quot; name=&quot;c1&quot; value=&quot;3&quot;&gt; Item 3</label></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="dropdown-btn">Dropdown 2</button>
    <ul class="dropdown-list">
      <li><label>&lt;input type=&quot;checkbox&quot; name=&quot;c2&quot; value=&quot;4&quot;&gt; Item 4</label></li>
      <li><label>&lt;input type=&quot;checkbox&quot; name=&quot;c2&quot; value=&quot;5&quot;&gt; Item 5</label></li>
      <li><label>&lt;input type=&quot;checkbox&quot; name=&quot;c2&quot; value=&quot;6&quot;&gt; Item 6</label></li>
    </ul>
  </div>
</div>

⚠️ 关键优势与注意事项

• 解耦逻辑与样式：显隐由 display 的 CSS 规则控制，JS 不再硬编码样式值，便于主题切换或动画过渡（如配合 max-height + transition 实现淡入滑动效果）。
• 避免 this 上下文陷阱：原代码中 this.nextElementSibling 在 forEach 回调里指向错误对象；新方案通过闭包捕获 wrapper，确保上下文准确。
• 无障碍友好：建议为 .dropdown-btn 添加 aria-expanded 属性，并同步更新（点击时取反），例如：

  btn.setAttribute('aria-expanded', wrapper.classList.contains('is-active'));

• 可扩展性强：只需新增 .dropdown.is-active .dropdown-btn { background: #007bff; } 即可高亮激活按钮，无需修改 JS。

该方案不仅修复了“无法关闭自身”的核心问题，更奠定了可维护、可测试、可无障碍访问的交互基础。

今天关于《点击按钮关闭其他下拉菜单并切换当前显隐状态的实现方法如下：实现思路监听点击事件：当用户点击下拉按钮时，触发事件。隐藏所有下拉菜单：在点击事件中，先将所有其他下拉菜单隐藏。切换当前下拉菜单的显隐状态：判断当前下拉菜单是否显示，如果显示则隐藏，否则显示。示例代码（使用HTML+JavaScript）HTML结构菜单1[选项1](#)[选项2](#)菜单2[选项A](#)[选项B](#)JavaScript逻辑document.querySelectorAll('.dropdown-toggle').forEach(button=>{button.addEventListener('click',function(){//隐藏所有下拉菜单document.querySelectorAll('.dropdown-menu').forEach(menu=>{menu.style.display='none';});//获取当前按钮对应的下拉》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！