Dropdown多选Checkbox问题：点击单个Checkbox后Dropdown自动收起，无法多选

核心原因 #

Dropdown自动收起通常是因为Checkbox的点击事件冒泡到了Dropdown的父容器，触发了Dropdown的关闭逻辑。而preventDefault()仅能阻止元素的默认行为（如表单提交、链接跳转），无法阻止事件向上传递，所以达不到预期效果。

具体解决方案 #

1. 阻止Checkbox的点击事件冒泡 #

在Checkbox的点击/变更事件中添加stopPropagation()，避免事件向上传递触发Dropdown关闭。

原生JS示例：

<div class="dropdown">
  <button class="dropdown-trigger">展开下拉菜单</button>
  <div class="dropdown-menu">
    <label><input type="checkbox">选项A</label>
    <label><input type="checkbox">选项B</label>
  </div>
</div>

const checkboxes = document.querySelectorAll('.dropdown-menu input[type="checkbox"]');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止事件冒泡到父容器
  });
});

React示例：

import { useState } from 'react';

function MultiSelectDropdown() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="dropdown">
      <button onClick={() => setIsOpen(!isOpen)}>展开下拉</button>
      {isOpen && (
        <div className="dropdown-content">
          <label>
            <input 
              type="checkbox" 
              onClick={(e) => e.stopPropagation()} // 阻止冒泡
            />
            选项1
          </label>
          <label>
            <input 
              type="checkbox" 
              onClick={(e) => e.stopPropagation()}
            />
            选项2
          </label>
        </div>
      )}
    </div>
  );
}

2. 修改UI组件库的Dropdown配置 #

如果使用成熟UI组件库（如Ant Design、Bootstrap），可通过组件内置属性调整关闭逻辑：

• Ant Design: 设置autoClose="outside"，仅点击下拉菜单外部区域时才关闭

  import { Dropdown, Menu } from 'antd';
  
  <Dropdown autoClose="outside" menu={<Menu items={menuItems} />}>
    <button>展开多选下拉</button>
  </Dropdown>
  

• Bootstrap: 自定义Dropdown的隐藏逻辑，仅点击触发按钮或页面其他区域时关闭，排除内部Checkbox的点击事件

3. 手动控制Dropdown的展开状态 #

通过状态变量完全掌控Dropdown的显示/隐藏，仅在点击触发按钮或外部区域时切换状态，点击Checkbox时不修改状态。

Vue示例：

<template>
  <div class="dropdown" @click.self="toggleOpen">
    <button @click="toggleOpen">展开下拉</button>
    <div v-if="isOpen" class="dropdown-menu">
      <label>
        <input type="checkbox" @click.stop /> 选项X
      </label>
      <label>
        <input type="checkbox" @click.stop /> 选项Y
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggleOpen() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

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