如何用jQuery实现点击外部关闭多选CSS下拉菜单？

你的思路方向是完全正确的——通过监听document的点击事件，判断点击区域是否在多选组件外部，从而关闭下拉列表。但代码里的几个细节问题导致了功能失效，我帮你梳理并修正一下：

问题分析 #

1. 选择器多余空格：你写的!$(target).is('.multi-select ')里，.multi-select后面多了一个空格，这会导致无法匹配到正确的组件元素（CSS选择器里的空格代表后代选择器），应该去掉空格写成.multi-select。
2. 未考虑事件冒泡与后代元素：点击下拉列表里的选项（比如span或label）时，事件会冒泡到document，这时候你的代码会误判为点击了外部，导致下拉被关闭。我们需要判断点击目标是否是多选组件的后代元素，而不仅仅是组件本身。
3. 关闭逻辑不够简洁：单独设置span和label的display属性有点繁琐，直接操作下拉选项的容器会更高效。

修正后的代码 #

$(document).click(function(e) {
  // 向上查找点击目标是否属于多选组件的一部分
  if (!$(e.target).closest('.multi-select').length) {
    // 直接隐藏下拉选项容器
    $('.multi-select-options').hide();
  }
});

额外注意点 #

别忘了在触发下拉展开的按钮点击事件中添加e.stopPropagation();，否则点击按钮时事件会冒泡到document，导致下拉刚展开就被关闭：

$('.multi-select-trigger').click(function(e) {
  e.stopPropagation(); // 阻止事件冒泡到document
  // 这里写你原来的下拉展开/切换逻辑，比如：
  $('.multi-select-options').toggle();
});

这样修改后，点击多选组件外部的区域就会自动关闭下拉列表，同时点击组件内部的任何元素都不会触发关闭，功能就能正常工作啦～

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