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

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>

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>

Answer 2

关闭所有打开的，如果点击的那个没有打开，则打开它：

// Select all accordion items
var acc = document.querySelectorAll('.accordion');

// Iterate to add event listeners
acc.forEach(item => {
    item.addEventListener('click', function () {
        // When it's clicked, loop through all the items
        acc.forEach(el => {
            // Close any open items
            if (el.classList.contains('active')) {
                closeAcc(el);
                // If it's the one that was clicked and it's closed, open it
            } else if (el === item) {
                openAcc(el);
            }
        });
    });
});

function closeAcc (el) {
    el.classList.remove('active');
    el.nextElementSibling.style.maxHeight = null;
};

function openAcc (el) {
    el.classList.add('active');
    el.nextElementSibling.style.maxHeight = el.nextElementSibling.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>

如果您有嵌套的手风琴，您需要在初始选择器中更加具体一些。

Answer 3

只需每次点击它们，将其他面板的显示样式设置为无。

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    var panels = document.getElementsByClassName("panel");
    Array.from(panels).forEach((panel) => {
      if (this.nextElementSibling != panel) {
        panel.style.display = "none";
        panel.style.maxHeight = null;
      }
    });

    /* 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>

Answer 4

可能是这样...

新年快乐！

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");
    for (i = 0; i < acc.length; i++) {
      var panel = acc[i].nextElementSibling;
      if (panel.style.display !== "block" && acc[i] == this) {
       panel.style.display = "block";
       panel.style.maxHeight = panel.scrollHeight + "px";
    } else {
    panel.style.display = "none";
      panel.style.maxHeight = null;
      this.classList.remove("active");
    } / * if */
      } /* for */
  });
} /* for */

.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>