如何在ReactJS中实现多独立切换功能：点击显菜单、外部点击隐藏

1. HTML结构设计 #

给每个下拉组添加独立关联标识，通过data-target属性将触发按钮与对应下拉容器绑定：

<!-- 菜单下拉组件 -->
<div class="dropdown-group">
  <button class="dropdown-trigger" data-target="menu-dropdown">菜单</button>
  <div class="dropdown-content" id="menu-dropdown">
    <a href="#">菜单项1</a>
    <a href="#">菜单项2</a>
    <a href="#">菜单项3</a>
  </div>
</div>

<!-- 分类下拉组件 -->
<div class="dropdown-group">
  <button class="dropdown-trigger" data-target="category-dropdown">分类</button>
  <div class="dropdown-content" id="category-dropdown">
    <a href="#">分类项1</a>
    <a href="#">分类项2</a>
    <a href="#">分类项3</a>
  </div>
</div>

2. 基础CSS样式 #

默认隐藏下拉内容，通过show类控制显示状态：

/* 下拉组容器，用于定位下拉内容 */
.dropdown-group {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

/* 默认隐藏下拉内容 */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 显示下拉内容的类 */
.dropdown-content.show {
  display: block;
}

/* 下拉项样式优化 */
.dropdown-content a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
}

.dropdown-content a:hover {
  background-color: #f5f5f5;
}

3. JavaScript逻辑实现 #

确保每个触发按钮仅操作对应下拉容器，同时处理外部点击关闭逻辑：

// 获取所有触发按钮和下拉内容元素
const triggers = document.querySelectorAll('.dropdown-trigger');
const dropdowns = document.querySelectorAll('.dropdown-content');

// 为每个触发按钮绑定点击事件
triggers.forEach(trigger => {
  trigger.addEventListener('click', (e) => {
    // 阻止事件冒泡，避免触发页面全局点击事件
    e.stopPropagation();
    
    // 获取当前触发按钮对应的下拉容器ID
    const targetId = trigger.getAttribute('data-target');
    const targetDropdown = document.getElementById(targetId);
    
    // 切换当前下拉容器的显示状态
    const isShowing = targetDropdown.classList.contains('show');
    
    // 先关闭所有下拉容器（若需允许多个同时展开，可删除此行及循环）
    dropdowns.forEach(dropdown => dropdown.classList.remove('show'));
    
    // 如果当前下拉原本隐藏，则显示它；否则保持关闭
    if (!isShowing) {
      targetDropdown.classList.add('show');
    }
  });
});

// 点击页面空白区域时，关闭所有下拉容器
document.addEventListener('click', () => {
  dropdowns.forEach(dropdown => dropdown.classList.remove('show'));
});

// 点击下拉容器内部时，不关闭下拉
dropdowns.forEach(dropdown => {
  dropdown.addEventListener('click', (e) => {
    e.stopPropagation();
  });
});

关键逻辑说明 #

• 独立关联：通过data-target与ID绑定触发按钮和下拉容器，确保操作仅作用于对应组件，不会影响其他下拉菜单。
• 事件冒泡控制：使用e.stopPropagation()避免点击触发按钮或下拉内容时，误触发页面全局关闭逻辑。
• 可选互斥显示：点击触发按钮时先关闭所有下拉，实现同一时间仅一个下拉展开；若需允许多个同时展开，删除关闭所有下拉的代码即可。

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