如何使用原生JavaScript实现点击div内容或其内部按钮关闭指定元素

1. 修改HTML结构 #

首先在你的.sidenav容器内部添加关闭按钮，示例如下：

<div id="mySidenav" class="sidenav">
  <!-- 新增关闭按钮，放在内容最顶部方便点击 -->
  <button class="close-sidenav">×</button>
  <p>
    Text tetxt text Text tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt
    text
    <br> Text tetxt text Text tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt textText tetxt text</p>
</div>

2. 修改JS代码 #

新增关闭按钮的点击事件逻辑，完整JS代码如下：

var infoBtn = document.getElementsByClassName("more-info");
var closeBtn = document.getElementsByClassName("close-sidenav");
var i;

// 原有展开/收起逻辑保留
for (i = 0; i < infoBtn.length; i++) {
  infoBtn[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  })
}

// 新增关闭按钮点击逻辑
for (i = 0; i < closeBtn.length; i++) {
  closeBtn[i].addEventListener("click", function() {
    // 拿到当前关闭按钮所属的sidenav容器
    var sidenav = this.closest('.sidenav');
    // 拿到对应的更多信息按钮
    var moreBtn = sidenav.previousElementSibling;
    // 移除active状态
    moreBtn.classList.remove('active');
    // 收起sidenav
    sidenav.style.maxHeight = null;
  })
}

3. 可选优化：调整关闭按钮样式 #

可以在CSS中添加以下代码统一美化关闭按钮：

.close-sidenav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.close-sidenav:hover {
  opacity: 0.8;
}

实现说明 #

你原有逻辑是通过maxHeight控制sidenav的显隐，不是display属性，所以关闭的时候只要还原maxHeight为null，同时清除对应more-info按钮的active状态即可，和原有收起逻辑保持一致，不会出现状态不同步的问题。closest方法可以直接找到当前按钮所属的sidenav容器，就算后续有多个项目卡片，也能对应到正确的元素，不会误操作其他卡片的弹窗。

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