JavaScript实现点击后仅单个panel类元素可见的方案咨询

当然有可行方案啦！你的思路完全没问题——先获取所有.panel元素，在触发点击事件时，先把所有panel统一设为隐藏状态，再单独将当前点击对应的panel设为显示，就能保证同一时间只有一个panel可见了。我帮你调整了代码，同时优化了逻辑和UI一致性：

// 获取所有折叠按钮和panel元素
const acc = document.querySelectorAll('.acc');
const panels = document.querySelectorAll('.panel');

for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    // 1. 先重置所有状态：隐藏所有panel，移除所有按钮的active类
    panels.forEach(panel => {
      panel.style.display = "none";
    });
    acc.forEach(btn => {
      btn.classList.remove("active");
    });

    // 2. 设置当前按钮和panel的状态
    this.classList.add("active");
    const panel = this.nextElementSibling;
    panel.style.display = "block";
  });
}

关键逻辑说明： #

• 提前一次性获取所有.acc和.panel元素，避免每次点击都重复查询DOM，提升性能
• 点击时先统一重置所有panel的显示状态和按钮的激活样式，确保不会有残留的显示元素
• 最后单独处理当前点击的按钮和对应的panel，添加激活类并显示面板

如果想要更优雅的实现（比如用CSS类控制显示隐藏而不是直接操作style），还可以这样优化：

/* 先给panel加默认隐藏的类 */
.panel {
  display: none;
}
/* 显示的panel用这个类 */
.panel.show {
  display: block;
}

const acc = document.querySelectorAll('.acc');
const panels = document.querySelectorAll('.panel');

acc.forEach((btn, index) => {
  btn.addEventListener("click", function() {
    // 重置所有状态
    panels.forEach(panel => panel.classList.remove('show'));
    acc.forEach(btn => btn.classList.remove('active'));

    // 设置当前状态
    this.classList.add('active');
    panels[index].classList.add('show');
  });
});

这种方式把样式控制交给CSS，JS只负责切换类，更符合关注点分离的原则，后期维护也更方便~

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