html - 如何一次只打开一个手风琴

Question

我正在尝试制作一个可折叠的手风琴，但我遇到的问题是它们都可以一次打开，而我一次只希望其中一个打开。我基本上想要打开一个，但是当单击另一个时，它会关闭已经打开的一个并打开新的。这是我的代码。

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

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 {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
 padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

标签： htmlcssaccordion

Answer 1

代表

我不确定您是否要隐藏或更改 maxHeight 或两者兼而有之

const accDiv = document.getElementById("accDiv");
accDiv.addEventListener("click", function(e) {
  const tgt = e.target;
  if (!e.target.classList.contains("accordion")) return;
  [...accDiv.querySelectorAll(".accordion")].forEach(btn => {
    if (btn !== tgt) btn.classList.remove("active");
    btn.nextElementSibling.classList.add("hide");
  })
  tgt.classList.toggle("active");
  const isActive = tgt.classList.contains("active");
  /* Toggle between hiding and showing the active panel */
  const panel = tgt.nextElementSibling;
  panel.classList.toggle("hide",!isActive)
  panel.style.maxHeight = isActive ? panel.scrollHeight + "px" : null;
});

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.active:after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
}

.accordion:after {
  content: '\02795';
  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.hide {
  display: none;
}

<div id="accDiv">
  <button class="accordion">Section 1</button>
  <div class="panel" class="hide">
    <p>Lorem ipsum 1...</p>
  </div>

  <button class="accordion">Section 2</button>
  <div class="panel" class="hide">
    <p>Lorem ipsum 2...</p>
  </div>

  <button class="accordion">Section 3</button>
  <div class="panel" class="hide">
    <p>Lorem ipsum 3...</p>
  </div>
</div>