关闭W3School手风琴的所有按钮（html，css，js专用）

Question

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

我想添加一个关闭使用Javascript，但没有成功的所有按钮。

我很喜欢Javascript，从我在原始代码中理解的东西，每当我们点击“手风琴”它获得类“活跃”，然后直接在我们点击的“面板”类将或者关闭或打开到一定的高度。

因此，对于关闭所有按钮，我试图创建一个按钮，每当我们点击它时，所有的文本类将会以与上一个函数相同的方式关闭。

不知道为什么它不起作用，所以我改变了代码，当我们点击关闭所有按钮，文本变成红色（只是为了测试），并且它工作正常。

当我尝试使用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: '\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; 
} 

.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: '\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; 
 
} 
 

 
.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

您将n EED到例如像这样做：

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; 
} 

的问题是，你正在寻找与.text类，而不是.panel具有过渡和其它适当的CSS集中的所有元素。