关闭W3School手风琴(仅HTML，CSS，JS)的全部按钮

Question

我正在研究一个需要手风琴的项目，我在W3School上发现，它效果很好。

我正在尝试使用JavaScript添加一个关闭的全按钮，但没有成功。

我是JavaScript的noob，从我在原始代码中理解的内容，每当我们单击"手风琴"时，它会获得"活动"类，然后在我们单击的位置直接下的"面板"类都可以关闭或开放到一定高度。

因此，对于关闭全按钮，我尝试创建一个按钮，每当我们单击它时，所有文本类都将以相同的方式关闭。

不确定为什么它不起作用，所以我更改了代码，当我们单击"关闭全按"按钮时，文本变成红色(只是进行测试(，并且可以正常工作。

当我尝试maxheight = null时；我没有任何错误消息。有人知道我在做什么错以及如何解决吗？

谢谢

(请参阅下面的代码(

https://jsfiddle.net/16qpjv5y/3/

html javascript

<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
  <p class="text">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 2</button>
<div class="panel">
  <p class="text">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 class="text">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 class="closeall" onclick="collapseall()">Close All</div>
<script>
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";
    } 
  }
}
function collapseall() { //problematic part
    var x = document.getElementsByClassName("text");
    var b;
    for (b = 0; b < x.length; b++) {
         x[b].style.maxHeight = null;
  }
}
</script>

CSS

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: '02B';
    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;
}
.closeall {
    float: right;
    margin: 1% 2% 0 0;
    cursor: pointer;
}

Answer 1

您将Maxheight更改应用于.text，应该是.panel。但是然后您也需要从按钮中删除.active类。

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: '02B';
    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;
}
.closeall {
    float: right;
    margin: 1% 2% 0 0;
    cursor: pointer;
}

<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
  <p class="text">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 2</button>
<div class="panel">
  <p class="text">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 class="text">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 class="closeall" onclick="collapseall()">Close All</div>
<script>
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";
    } 
  }
}
function collapseall() {  //problematic part
    var x = document.getElementsByClassName("panel");
    var b;
    for (b = 0; b < x.length; b++) {
        x[b].style.maxHeight = null;
        x[b].previousElementSibling.classList.remove('active');
  }
}
</script>

Answer 2

您需要这样做：

function collapseall() {  //problematic part
    var x = document.getElementsByClassName("accordion");
    var b;
    for (b = 0; b < x.length; b++) {
    x[b].classList.remove("active");
    var panel = x[b].nextElementSibling;
    panel.style.maxHeight = null;
}

问题在于，您正在使用具有过渡和其他适当CSS的.text类而不是.panel类找到所有元素。