点击子链接时关闭父折叠容器的JavaScript实现问题

嘿，我完全get到你的需求啦——现在你的mobilecollapsible按钮已经能正常打开/关闭对应的折叠内容，但点击内容里的链接时，希望这个折叠容器能自动收起来对吧？这其实只需要给内容里的链接也加上对应的事件逻辑就行，我来一步步帮你实现～

现有代码的问题分析 #

你当前的代码只给折叠按钮绑定了点击事件，处理了容器的展开/收起，但没有处理折叠内容里链接的点击事件，所以点击链接时不会触发容器关闭的逻辑。

解决方案：给链接添加关闭事件 #

我们可以在原代码的基础上，新增一段逻辑：遍历所有折叠内容容器里的链接，给每个链接绑定点击事件，触发时关闭对应的折叠容器。

修改后的完整代码

// 先处理折叠按钮的点击逻辑（原代码保留）
var coll = document.getElementsByClassName("mobilecollapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var mobilecollapsiblecontent = this.nextElementSibling;
    if (mobilecollapsiblecontent.style.display === "block") {
      mobilecollapsiblecontent.style.display = "none";
    } else {
      mobilecollapsiblecontent.style.display = "block";
    }
  });
}

// 新增：给折叠内容里的链接绑定关闭容器的事件
var contentContainers = document.getElementsByClassName("mobilecollapsiblecontent");
for (var j = 0; j < contentContainers.length; j++) {
  // 获取当前容器内的所有链接
  var links = contentContainers[j].querySelectorAll("a");
  links.forEach(function(link) {
    link.addEventListener("click", function() {
      // 找到对应的折叠按钮（内容容器的前一个兄弟元素）
      var targetButton = contentContainers[j].previousElementSibling;
      // 移除按钮的active类，恢复初始样式
      targetButton.classList.remove("active");
      // 隐藏折叠内容容器
      contentContainers[j].style.display = "none";
    });
  });
}

更整洁的优化方案（可选） #

如果想让代码更易维护，可以把折叠状态切换的逻辑封装成一个函数，避免重复代码：

// 封装折叠状态切换的通用函数
function handleCollapse(button, shouldClose = false) {
  var content = button.nextElementSibling;
  if (shouldClose) {
    button.classList.remove("active");
    content.style.display = "none";
  } else {
    button.classList.toggle("active");
    content.style.display = content.style.display === "block" ? "none" : "block";
  }
}

// 给折叠按钮绑定点击事件
var coll = document.getElementsByClassName("mobilecollapsible");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    handleCollapse(this);
  });
}

// 给链接绑定关闭事件
var contentContainers = document.getElementsByClassName("mobilecollapsiblecontent");
for (var j = 0; j < contentContainers.length; j++) {
  var links = contentContainers[j].querySelectorAll("a");
  links.forEach(function(link) {
    link.addEventListener("click", function() {
      var targetButton = contentContainers[j].previousElementSibling;
      // 只有当容器处于展开状态时才执行关闭
      if (targetButton.classList.contains("active")) {
        handleCollapse(targetButton, true);
      }
    });
  });
}

注意事项 #

• 如果你的链接是带跳转的（比如<a href="/some-page">），关闭容器的逻辑会在页面跳转前执行，完全不影响跳转行为；
• 如果链接是阻止默认行为的（比如用preventDefault()），这个关闭逻辑也能正常工作。

备注：内容来源于stack exchange，提问作者jkaramazov