点击movs-header同步控制外部movs-editlink显隐的JS实现问题

你的判断完全正确——movs-editlink不在点击的movs-header的作用域内，它是movs-box容器的下一个兄弟元素，所以需要先定位到movs-header的父容器，再找到对应的编辑链接元素。

修改后的可运行代码 #

var acc = document.getElementsByClassName("movs-header");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
    this.classList.toggle("active");
    // 获取当前点击的header的父容器movs-box
    var parentBox = this.parentElement;
    // 获取movs-body（header的下一个同级元素）
    var x = this.nextElementSibling;
    // 获取movs-box的下一个兄弟元素——movs-editlink
    var xedit = parentBox.nextElementSibling;

    // 用getComputedStyle兼容初始非内联样式的判断场景
    var isVisible = window.getComputedStyle(x).display === "block";
    
    if (isVisible) {
      x.style.display = "none";
      xedit.style.display = "none";
    } else {
      x.style.display = "block";
      xedit.style.display = "block";
    }
  }
}

关键修改点说明 #

1. 正确定位movs-editlink：通过this.parentElement拿到当前movs-header的父容器movs-box，再用nextElementSibling获取紧跟在它后面的movs-editlink元素，这是基于DOM结构的最直接关联方式。
2. 兼容初始样式状态：原来的代码只判断x.style.display，但如果初始显隐是通过CSS类设置的（而非内联style属性），这个判断会失效。改用window.getComputedStyle(x).display可以获取元素最终的渲染样式，逻辑更可靠。
3. 同步状态切换：把movs-body和movs-editlink的显隐逻辑绑定在一起，确保两者状态完全同步。

额外优化建议（可选） #

如果你的页面存在动态加载这些元素的场景，建议用事件委托代替直接绑定onclick，这样新添加的元素也能自动触发逻辑：

document.addEventListener('click', function(e) {
  // 确保点击的是movs-header或其内部元素
  const header = e.target.closest('.movs-header');
  if (header) {
    header.classList.toggle("active");
    const parentBox = header.parentElement;
    const x = header.nextElementSibling;
    const xedit = parentBox.nextElementSibling;
    const isVisible = window.getComputedStyle(x).display === "block";
    
    x.style.display = isVisible ? "none" : "block";
    xedit.style.display = isVisible ? "none" : "block";
  }
});

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