如何实现点击#nav_dropdown_items外部区域时隐藏该div？

嘿，这事儿好办！要实现点击下拉菜单外部区域就隐藏它，咱们可以通过监听整个文档的点击事件，判断点击的目标是不是下拉菜单或者触发它的按钮——如果都不是，就把下拉菜单收起来。

下面是调整后的完整代码，我会给你拆解逻辑：

修改后的JavaScript代码 #

// 先给触发按钮和下拉菜单取个方便获取的变量
const navTrigger = document.getElementById('nav_trigger');
const navDropdown = document.getElementById('nav_dropdown_items');

function nav_category_show(e) {
  // 阻止事件冒泡到document，不然刚点按钮显示菜单，document的点击事件会立刻把它藏起来
  e.stopPropagation();
  
  if (!navDropdown.classList.contains('w3-show')) {
    navDropdown.classList.add('w3-show');
  } else {
    navDropdown.classList.remove('w3-show');
  }
}

// 监听文档的点击事件
document.addEventListener('click', function(e) {
  // 判断点击的目标是不是下拉菜单本身，或者是触发按钮
  const isClickInsideDropdown = navDropdown.contains(e.target);
  const isClickOnTrigger = navTrigger.contains(e.target);
  
  // 如果都不是，而且菜单现在是显示状态，就隐藏它
  if (!isClickInsideDropdown && !isClickOnTrigger && navDropdown.classList.contains('w3-show')) {
    navDropdown.classList.remove('w3-show');
  }
});

对应的HTML调整 #

主要是给触发点击的<span>加个ID，方便我们在JS里定位它：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 给这个触发元素加上id="nav_trigger" -->
<span id="nav_trigger" onclick="nav_category_show(event)">click here<i class="fa fa-bars"></i></span>

<div id="nav_dropdown_items" class="w3-animate-zoom w3-dropdown-content w3-bar-block w3-card-4">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
</div>

关键逻辑说明 #

• 阻止事件冒泡：在nav_category_show函数里加上e.stopPropagation()，是为了避免点击触发按钮时，事件传到document的点击监听里，导致菜单刚显示就被隐藏。
• 判断点击区域：通过contains()方法检查点击的目标是否属于下拉菜单或者触发按钮，这样就能精准区分“内部点击”和“外部点击”。
• 类操作优化：用classList.add()和classList.remove()代替字符串拼接/替换，比原来的写法更安全、更易维护，不会不小心改掉其他类名。

这样调整后，不管你点击页面上除了触发按钮和下拉菜单之外的任何地方，下拉菜单都会自动隐藏啦！

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