JavaScript点击外部关闭下拉菜单：教程代码原理答疑

Hey there! Let's break this down step by step so you and other new developers can understand how dropdown close-on-outside-click logic works, plus fix the broken functionality in your code.

First off, yes—the tutorial code is absolutely designed to close the dropdown when you click outside of it. Now let's unpack how that code operates, then spot the issues in your implementation.

教程代码的工作原理 #

The tutorial code has two key parts: toggling the dropdown on button click, and closing it when clicking elsewhere.

1. 按钮点击：切换下拉菜单可见性 #

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

• 当用户点击绑定了myFunction的下拉按钮时，代码通过ID找到下拉内容容器。
• classList.toggle("show")的作用是：如果容器没有show类就添加，有就移除。CSS里的.show类会覆盖下拉内容默认的display: none属性，让菜单显示出来，这就实现了“点击按钮展开/收起”的效果。

2. 全局点击：点击外部关闭下拉菜单 #

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

• 我们给整个window绑定了点击事件，意味着页面上任何位置的点击都会触发这个函数。
• event.target指的是用户实际点击的元素。!event.target.matches('.dropbtn')用来判断：如果点击的不是下拉按钮本身，才执行关闭逻辑。
• 接着通过getElementsByClassName获取页面上所有下拉内容容器，遍历每一个：如果某个容器带有show类（也就是处于展开状态），就移除这个类让它隐藏。
• 这里判断“不是点击按钮”非常关键：如果没有这个判断，点击按钮时会同时触发切换函数和全局点击函数，导致下拉菜单刚展开就立刻关闭，抵消了按钮的作用。

你的代码为什么无法关闭下拉菜单 #

咱们逐一排查你代码里的问题：

1. 错误替换了容器的类名 #

你的shareVis函数写了：

document.getElementById("mySharedown").className = "show";

这会直接把容器原本的sharedown-content类替换成show。后续关闭逻辑里用getElementsByClassName("sharedown-content")根本找不到这个容器，自然无法执行关闭操作。

修复方法：用classList.add("show")（仅实现点击展开）或者classList.toggle("show")（点击切换展开/收起），这样只会添加/切换show类，保留原本的sharedown-content类：

document.getElementById("mySharedown").classList.toggle("show");

2. 全局点击判断用错了选择器 #

你的判断条件是：

if (!event.target.matches('sharebtn')) {

没有加.的sharebtn是标签选择器（会去找<sharebtn>标签），但你的按钮是带有sharebtn类的<p>元素，应该用类选择器.sharebtn。

没有这个修复的话，这个判断永远为true（因为你不会点击<sharebtn>标签），包括点击按钮本身也会进入关闭逻辑。不过因为第一个问题导致容器找不到，所以关闭逻辑还是没效果。

3. CSS样式冗余（可选优化） #

你的.show类重复写了很多和.sharedown-content一样的样式，其实只需要覆盖display属性就够了，其他样式已经在容器类里定义过：

.show {
  display: block;
}

修复后的完整代码 #

这里是修正后的全部代码：

HTML #

<div class="sharedown">
  <p onclick="shareVis()" class="sharebtn">&nbsp Share</p>
  <div id="mySharedown" class="sharedown-content">
    <a href="#">Self</a>
    <p>User</p>
    <input type="text" name="user-name" placeholder="Share to">
    <a href="#">Community</a>
  </div>
</div>

JavaScript #

function shareVis() {
  // 点击按钮切换下拉菜单的展开/收起状态
  document.getElementById("mySharedown").classList.toggle("show");
}

window.onclick = function(event) {
  // 判断点击的不是分享按钮
  if (!event.target.matches('.sharebtn')) {
    var sharedowns = document.getElementsByClassName("sharedown-content");
    for (var i = 0; i < sharedowns.length; i++) {
      var openSharedown = sharedowns[i];
      if (openSharedown.classList.contains('show')) {
        openSharedown.classList.remove('show');
      }
    }
  }
}

CSS #

/* Share dropdown menu */
p.sharebtn {
  color: darkgrey;
  font-family: calibri;
  padding: 0px;
  margin: 0px;
  font-size: 12px; /* 补充了缺失的px单位 */
  border: none;
  cursor: pointer;
  display: inline;
}

/* Dropdown button hover & focus 状态 */
p.sharebtn:hover, p.sharebtn:focus {
  color: grey;
}

/* 下拉菜单容器：用于定位下拉内容 */
.sharedown {
  position: relative;
  display: inline-block;
}

/* 下拉内容（默认隐藏） */
.sharedown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100px;
  box-shadow: 0 2px 4px 1px #C4E3F5;
  z-index: 1; /* 让下拉菜单显示在其他元素上方 */
}

.sharedown-content a {
  color: black;
  padding: 5px 5px;
  text-decoration: none;
  display: block;
}

/* 显示下拉菜单的类 */
.show {
  display: block;
}

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