手风琴展开/折叠所有没有 jQuery

Question

I've got an accordion on my page, which I copied from this website:我的页面上有一个手风琴，是从这个网站复制的：

https://www.w3schools.com/howto/howto_js_accordion.asp https://www.w3schools.com/howto/howto_js_accordion.asp

Code snippet below.下面的代码片段。 I'm trying to make a button that expands all and another that collapses all .我正在尝试制作一个可展开 all和另一个可折叠 all的按钮。 I don't want to use jQuery, if possible, but if it can work with this w3schools code, I don't mind using it.如果可能的话，我不想使用 jQuery，但如果它可以使用这个 w3schools 代码，我不介意使用它。

 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%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <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"> <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 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> </body> </html>

Answer 1

Something short and simple, I just added two buttons and two functions that adds and removes the active class from the array of items.一些简短而简单的事情，我只是添加了两个按钮和两个函数，用于从项目数组中添加和删除活动类。 It's not the best code but functionality wise it should do what you're asking to do.这不是最好的代码，但功能明智它应该做你要求做的事情。

 var acc = document.getElementsByClassName("accordion"); var temp = document.getElementById("expandAll"); 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"; } }); } function Expand(){ for (i = 0; i < acc.length; i++) { if(!acc[i].className.includes("active")){ acc[i].classList.add("active"); var panel = acc[i].nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } } } function Collapse(){ for (i = 0; i < acc.length; i++) { if(acc[i].className.includes("active")){ acc[i].classList.remove("active"); var panel = acc[i].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%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <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"> <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 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> <button id="expandAll" onclick="Expand();">Expand</button> <button id="collapseAll" onclick="Collapse();">Collapse</button> </body> </html>

Answer 2

I believe this is what you want, basically I added two buttons and attached click event listener on click event and based on the button clicked we have to hardcode the hight of the accordion content.我相信这就是您想要的，基本上我添加了两个按钮并在click事件上附加了点击事件侦听器，并且基于点击的按钮，我们必须对手风琴内容的高度进行硬编码。

 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"; } }); } document.getElementById('collapse-all').addEventListener('click', function(e) { for (i = 0; i < acc.length; i++) { acc[i].classList.add('active'); var panel = acc[i].nextElementSibling; panel.style.maxHeight = panel.scrollHeight + "px"; } }); document.getElementById('close-all').addEventListener('click', function(e) { for (i = 0; i < acc.length; i++) { acc[i].classList.remove('active'); var panel = acc[i].nextElementSibling; panel.style.maxHeight = null; } });

 .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; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <button id="collapse-all">Collapse all</button> <button id="close-all">Close all</button> <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"> <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 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> </body> </html>

Answer 3

<div id='accordion' onClick="expand=true; toggleExpand()">
    <div *ngIf="expand==true">collapsed content...</div>
</div>

let expand = false;

public toggleExpand() {
    if(expand == false) {expand = true;}
    else if(expand == true) {expand=false;}
}

手风琴展开/折叠所有没有 jQuery

问题描述

3 个解决方案

解决方案1
2 2020-02-28 20:01:18

解决方案2
1 已采纳 2020-02-28 19:58:56

解决方案3
0 2020-02-28 21:01:25

手风琴展开/折叠所有没有 jQuery

问题描述

3 个解决方案

解决方案1 2 2020-02-28 20:01:18

解决方案2 1 已采纳 2020-02-28 19:58:56

解决方案3 0 2020-02-28 21:01:25

解决方案1
2 2020-02-28 20:01:18

解决方案2
1 已采纳 2020-02-28 19:58:56

解决方案3
0 2020-02-28 21:01:25