javascript - 如何在另一个面板打开时关闭 Accordion 面板？

Question

我的静态 HTML/CSS/JS 网站上有 Accordion 小部件。

默认情况下所有 Accordion 都是关闭的。

用户可以打开它们中的任何一个，并且它们将保持打开状态，直到用户通过单击 Accordion 标题手动关闭它们。

当用户点击打开另一个 Accordion 时，如何关闭之前打开的 Accordion ？

我使用此模板创建了 Accordion :https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate

我把 HTML 和 JS 都放在了 HTML 文件中:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}

.accordion {
  color: #fff;
  background-color: #00000042;
  cursor: pointer;
  padding: 10px 10px;
  margin-top:20px;
  width: 100%;
  border: 1px solid #00000042;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #00000042;
  border: 1px solid #fc8e2d;
}

.panel {
  padding: 0 18px;
  font-size: 18px;
  background-color: #00000042;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

<button class="accordion"><span class="faq__question-heading">Title1</span></button>
<div class="panel">
  <p style="padding:18px 0;">description1</p>
</div>

<button class="accordion"><span class="faq__question-heading">Title2</span></button>
<div class="panel">
  <p style="padding:18px 0;">description2</p>
</div>

<button class="accordion"><span class="faq__question-heading">Title3</span></button>
<div class="panel">
  <p style="padding:18px 0;">description3</p>
</div>

<script>

</script>

Answer 1

当我完成代码时，已经给出了一些答案；)。但是无论如何我都会做出贡献。每次打开 Accordion 时，您都必须执行一些额外的代码。您必须获取具有类 .active 的元素- 在你的情况下，我们将使用 .accordion.active .之后有必要删除 .active来自找到的元素的类。最后你必须更新 max-height以下面板。你可以用 nextElementSilbling 做到这一点.这是更新后的 JS 代码:

  let active = document.querySelectorAll(".accordion-div .accordion.active");
  for(let j = 0; j < active.length; j++){
    active[j].classList.remove("active");
    active[j].nextElementSibling.style.maxHeight = null; //or 0px
  }

此外，我还更新了 HTML 以更好地封装组件。我包裹了一个 <div>围绕所有内容以更好地应用选择器来检索元素。希望这可以帮助。我复制了您的答案并对其进行了更新以生成一个工作示例。如果你想每页使用多个 Accordion ，我建议使用 id=检索正确的。否则所有 Accordion 都会关闭，这不应该是故意发生的。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {

var panel = this.nextElementSibling;
if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  let active = document.querySelectorAll(".accordion-div .accordion.active");
  for(let j = 0; j < active.length; j++){
    active[j].classList.remove("active");
    active[j].nextElementSibling.style.maxHeight = null;
  }
  this.classList.toggle("active");
  panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}

.accordion {
  color: #fff;
  background-color: #00000042;
  cursor: pointer;
  padding: 10px 10px;
  margin-top:20px;
  width: 100%;
  border: 1px solid #00000042;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #00000042;
  border: 1px solid #fc8e2d;
}

.panel {
  padding: 0 18px;
  font-size: 18px;
  background-color: #00000042;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

<div class="accordion-div">
  <button class="accordion"><span class="faq__question-heading">Title1</span></button>
  <div class="panel">
    <p style="padding:18px 0;">description1</p>
  </div>

  <button class="accordion"><span class="faq__question-heading">Title2</span></button>
  <div class="panel">
    <p style="padding:18px 0;">description2</p>
  </div>

  <button class="accordion"><span class="faq__question-heading">Title3</span></button>
  <div class="panel">
    <p style="padding:18px 0;">description3</p>
  </div>
</div>