如何使用 anthore slidedown Accordion 添加更多按钮？

Question

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

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

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

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

button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2212";
}

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

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <button class="accordion">S 1</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>


<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

我想为第 1 部分创建另一个按钮，但是当我添加它时，我无法单击以将其向下滑动！我的代码出了什么问题？？我根据这里更改了代码！！[在此处输入链接描述][1]

[1]: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol 我添加了一个标签调用 s1。

Answer 1

嵌套按钮下方的部分未显示的原因是包含它的父按钮中的panel 也有一个max-height 集（53 像素）。您可以通过使用 panel 类检查父容器并增加它们的 max-height 来解决这个问题，或者通过为嵌套按钮创建不同的函数来设置兄弟姐妹和父 @987654326 的 max-height @。

<div class="panel" style="max-height:53px;"> <!-- Account for this one! -->
  <button class="accordion active">S 1</button>
  <div class="panel" style="max-height:86px;">
    <p>Lorem ipsum...</p>
  </div>
</div>