React中点击当前子组件时如何关闭其余子组件的已展开菜单

核心交互规则 #

• 点击任意视频卡片的三点菜单按钮时，首先遍历关闭所有已展开的其他菜单
• 完成全局关闭操作后，仅处理当前被点击的菜单状态：若原状态为关闭则展开，若原状态为展开则保持关闭

实现思路 #

通过类名排他控制即可实现该效果，无需复杂状态管理，原生JS实现逻辑如下：

1. 给所有三点菜单按钮绑定统一的点击事件监听
2. 点击触发时优先移除所有菜单面板的active（展开状态）类名，实现全局关闭
3. 仅对当前点击按钮绑定的对应菜单做状态切换

代码示例 #

JS逻辑代码 #

// 批量获取所有菜单按钮和菜单面板
const menuBtns = document.querySelectorAll('.video-card .three-dot-btn')
const menuPanels = document.querySelectorAll('.video-card .menu-panel')

menuBtns.forEach((btn, index) => {
  btn.addEventListener('click', (e) => {
    // 阻止冒泡避免和点击外部关闭逻辑冲突
    e.stopPropagation()
    // 全局关闭所有已展开的菜单
    menuPanels.forEach(panel => panel.classList.remove('active'))
    // 切换当前菜单状态
    const targetPanel = menuPanels[index]
    targetPanel.classList.toggle('active')
  })
})

// 补充扩展：点击页面空白处关闭所有已展开菜单
document.addEventListener('click', () => {
  menuPanels.forEach(panel => panel.classList.remove('active'))
})

配套基础CSS #

.menu-panel {
  display: none;
  /* 自定义菜单样式：定位、圆角、阴影等 */
}
.menu-panel.active {
  display: block;
}

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