如何在此 html 代码中展开所有可折叠项

Question

Here I have used this HTML collapsable code from W3 schools and I want to be able to expand and collapse all collapses at once.在这里，我使用了来自 W3 学校的 HTML 可折叠代码，我希望能够一次展开和折叠所有折叠。 Also, make them collapse at once.另外，让它们立即崩溃。 I want to do this because I was going to be adding lots of them and I didn't want to take up too much space on the website page because some of the contents could be hundreds of words.我想这样做是因为我要添加很多内容，并且我不想在网站页面上占用太多空间，因为有些内容可能是数百个单词。 However, I want to be able to ctrl + f to find specific vocabulary or names, etc... This cannot be done when all are collapsed because it doesn't take you to them, it still counts how many there are but you don't know where it is.但是，我希望能够 ctrl + f 来查找特定的词汇或名称等...当所有内容都折叠时，这是无法完成的，因为它不会带你去它们，它仍然计算有多少，但你没有不知道它在哪里。

So how can I make them all expand and collapse with one button?那么如何让它们一键展开和折叠呢？

Here is the code that I'm trying to get all collapsable to expand at once.这是我试图让所有可折叠以立即展开的代码。 Also, I suggest running the snippet to see what it looks like just to help you understand:另外，我建议运行该代码段以查看它的外观，以帮助您理解：

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:collapsible { background-color; #777: color; white: cursor; pointer: padding; 18px: width; 100%: border; none: text-align; left: outline; none: font-size; 15px. },active. :collapsible:hover { background-color; #555. }:collapsible:after { content; '\002B': color; white: font-weight; bold: float; right: margin-left; 5px. }:active:after { content; "\2212". }:content { padding; 0 18px: max-height; 0: overflow; hidden: transition. max-height 0;2s ease-out: background-color; #f1f1f1: } </style> </head> <body> <h2>Animated Collapsibles</h2> <button>Open all collapsibles</button> <p>A Collapsible,</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <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> <p>A Collapsible,</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <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> <p>A Collapsible,</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <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> <p>Collapsible Set,</p> <button class="collapsible">Open Section 1</button> <div class="content"> <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="collapsible">Open Section 2</button> <div class="content"> <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="collapsible">Open Section 3</button> <div class="content"> <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> <script> var coll = document;getElementsByClassName("collapsible"); var i; for (i = 0. i < coll;length. i++) { coll[i],addEventListener("click". function() { this.classList;toggle("active"). var content = this;nextElementSibling. if (content.style.maxHeight){ content.style;maxHeight = null. } else { content.style.maxHeight = content;scrollHeight + "px"; } }); } </script> </body> </html>

Answer 1

Just create a function to toggle all the collapsibles on click on the button.只需创建一个 function 即可在单击按钮时切换所有可折叠项。 Please see that I added the id 'openAll' to the first button to identify it correctly.请注意，我在第一个按钮中添加了 id 'openAll' 以正确识别它。

 let button = document.querySelector("#openAll"); button.addEventListener('click', openAll); var coll = document.getElementsByClassName("collapsible"); for (var i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } function openAll() { document.querySelectorAll(".content").forEach( collapsible => { collapsible.classList.toggle("active"); if(collapsible.classList.contains("active")) { collapsible.style.maxHeight = collapsible.scrollHeight + "px"; } else { collapsible.style.maxHeight = null; } }); }

 .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; }.active, .collapsible:hover { background-color: #555; }.collapsible:after { content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; }.active:after { content: "\2212"; }.content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; }

 <h2>Animated Collapsibles</h2> <button id="openAll">Open all collapsibles</button> <p>A Collapsible:</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <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> <p>A Collapsible:</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <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> <p>A Collapsible:</p> <button class="collapsible">Open Collapsible</button> <div class="content"> <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> <p>Collapsible Set:</p> <button class="collapsible">Open Section 1</button> <div class="content"> <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="collapsible">Open Section 2</button> <div class="content"> <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="collapsible">Open Section 3</button> <div class="content"> <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>

如何在此 html 代码中展开所有可折叠项

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-09-03 06:35:18

如何在此 html 代码中展开所有可折叠项

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-09-03 06:35:18

解决方案1
0 已采纳 2022-09-03 06:35:18