如何实现点击外部关闭dropdown div，点击菜单内不关闭

我完全懂你的需求——现有的实现会在点击下拉菜单内部或外部时都关闭菜单，但你的菜单里包含复选框，用户在选择选项时肯定需要菜单保持打开状态。咱们可以通过判断点击事件的目标元素来精准控制菜单的显示/隐藏，具体方案如下：

核心思路 #

1. 给document添加全局点击事件监听，用来捕获所有点击操作
2. 当点击发生时，检查点击的元素是否属于下拉按钮或者下拉菜单本身（包括它的所有子元素）
3. 如果点击的是外部区域，则关闭下拉菜单；如果是内部区域，则保持打开

修改后的完整代码 #

JavaScript

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// 全局点击监听，处理外部关闭逻辑
document.addEventListener('click', function(event) {
  const dropdownBtn = event.target.closest('.dropbtn');
  const dropdownContent = event.target.closest('.dropdown-content');
  
  // 如果点击的不是按钮，也不是下拉菜单内部元素，则关闭菜单
  if (!dropdownBtn && !dropdownContent) {
    document.getElementById("myDropdown").classList.remove("show");
  }
});

CSS

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
  background-color: #3e8e41;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

label {
  display: block;
  padding: 12px 16px;
  cursor: pointer; /* 给label添加指针样式，提升交互体验 */
}

label:hover {
  background-color: #f1f1f1; /* 鼠标悬停label时高亮，优化体验 */
}

.show {
  display:block;
}

HTML

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <label><input type="checkbox" value="Vanilla">Vanilla</label>
    <label><input type="checkbox" value="Chocolate">Chocolate</label>
    <label><input type="checkbox" value="Strawberry">Strawberry</label>
  </div>
</div>

代码说明 #

• event.target.closest()方法会向上查找最近的匹配元素，这样不管点击的是复选框、label文本还是菜单的空白区域，都会被识别为下拉菜单内部元素
• 我们额外给label添加了悬停样式和指针光标，让用户交互更清晰
• 全局点击事件只会在点击非下拉相关元素时触发关闭操作，完美解决你的需求

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