打开新div时如何关闭可折叠div
我正在尝试设置可折叠的 div。它们工作正常，但是当我打开另一个可折叠 div 时，打开的 div 不会关闭，除非我手动将它们一一关闭。
如何在打开另一个 div 时自动创建一个打开的可折叠 div？
超文本标记语言
<html>
<button type="button" class="collapsible">BUTTON</button>
<div class="content">
<p style="padding: 20px 0;">CONTENT</p>
</div>
<button type="button" class="collapsible">BUTTON</button>
<div class="content">
<p style="padding: 20px 0;">CONTENT</p>
</div>
<button type="button" class="collapsible">BUTTON</button>
<div class="content">
<p style="padding: 20px 0;">CONTENT</p>
</div>
</html>
JS
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";
}
});
}
互换的青春2回答
-
哆啦的时光机
在打开折叠的 div 之前，您的代码必须关闭所有打开的 div。// toggle collapse of specified contentfunction toggleContent(content) { if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + 'px'; }}// collapse all open contentfunction collapseAllOpenContent() { const colls = document.getElementsByClassName('collapsible'); for (const coll of colls) { if (coll.classList.contains('active')) { coll.classList.remove('active'); toggleContent(coll.nextElementSibling); } }}工作示例：// toggle collapse of specified contentfunction toggleContent(content) { if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + 'px'; }}// collapse all open contentfunction collapseAllOpenContent() { const colls = document.getElementsByClassName('collapsible'); for (const coll of colls) { if (coll.classList.contains('active')) { coll.classList.remove('active'); toggleContent(coll.nextElementSibling); } }}const colls = document.getElementsByClassName('collapsible');for (const coll of colls) { coll.addEventListener('click', function() { if (!this.classList.contains('active')) { collapseAllOpenContent(); } this.classList.toggle('active'); toggleContent(this.nextElementSibling); });}.collapsible { background-color: #fff; color: #555; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px;}.active,.collapsible:hover { background-color: #fff;}.collapsible:after { content: '\002B'; color: #555; 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: #fff;}<button type="button" class="collapsible">BUTTON</button><div class="content"> <p style="padding: 20px 0;">CONTENT</p></div><button type="button" class="collapsible">BUTTON</button><div class="content"> <p style="padding: 20px 0;">CONTENT</p></div><button type="button" class="collapsible">BUTTON</button><div class="content"> <p style="padding: 20px 0;">CONTENT</p></div> -
慕斯709654
人们对这种方法有很多担忧......关注点分离，例如单独的样式与模板（CSS 与 HTML）。将所有样式移至单独的 css 文件中。也在 JS 中设置样式，而不是使用 CSS 类，您可以在其中添加所需的样式，例如 maxHeight、padding 等。不要在代码中使用语义 HTML。例如，使用详细信息作为包装器，使用摘要作为包装器的描述，并使用按钮来切换 p 内容。根据document.getElementsByClassName("collapsible")集合的长度添加多个点击事件，这在性能方面不太好。您可以在 document.body 上添加事件，然后验证单击的元素是否属于给定类型并具有给定的类/id。但是，此时此刻，您甚至不再需要 JS 来完成此类功能。您需要做的就是使用details和summary标签，它将以这种手风琴方式运行。<details> <summary>Accordion item title 1</summary> <div class="accordion-content"> content for the second item </div></details><details> <summary>Accordion item title 2</summary> <div class="accordion-content"> content for the first item </div></details>
随时随地看视频慕课网APP
相关分类
Html5