如何修改JavaScript折叠脚本使其定位首个类名为meerinfobox的元素

解决方案 #

你只需要调整JS代码中目标折叠元素的查找逻辑即可，修改后的完整代码如下：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    // 先找到当前点击元素所在的color-tag外层容器
    var parentWrap = this.closest('.color-tag');
    // 取外层容器的下一个相邻元素，就是对应的meerinfobox
    var content = parentWrap.nextElementSibling;
    // 可选：加判断避免操作非目标元素报错
    if (!content || !content.classList.contains('meerinfobox')) return;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

改动说明 #

• 原逻辑直接取点击元素（.collapsible的span标签）的相邻元素，由于span被包裹在.color-tag的div内部，它的相邻元素是同层级的文本节点，无法匹配到外层的.meerinfobox。
• 新增this.closest('.color-tag')向上查找最近的.color-tag祖先容器，该容器的下一个相邻元素就是对应的.meerinfobox，完全匹配你给出的HTML结构。
• 可选增加了类名校验逻辑，避免结构变动时出现无意义的报错。

兼容旧浏览器的替代写法 #

如果需要兼容不支持closest方法的旧浏览器（如IE11），可以把查找父容器的逻辑替换为逐层向上遍历：

// 替换var parentWrap = this.closest('.color-tag'); 为以下代码
var parentWrap = this.parentNode;
while(parentWrap && parentWrap.nodeType === 1 && !parentWrap.classList.contains('color-tag')){
  parentWrap = parentWrap.parentNode;
}

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