javascript - 如何让可折叠的内容默认展开(显示)
问题描述
我在 w3school ( https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol )中找到了教程,但默认情况下隐藏了可折叠内容。以下部分是链接中的代码。请帮助我找到如何从默认隐藏的可折叠内容更改为默认的内容传播(显示)。谢谢!
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";
}
});
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';/* Unicode character for "plus" sign (+) */
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";/* Unicode character for "minus" sign (-) */
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
<h2>Animated Collapsibles</h2>
<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>
解决方案
正如@Andy Hoffman 所说,只需一件事即可获得所有风格
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";
}
});
coll[i].classList.toggle("active");
coll[i].nextElementSibling.style.maxHeight = coll[i].scrollHeight + "px";
}
推荐阅读
- javascript - 如何将数字字节拆分为 Uint8Array
- javascript - 正确的交叉点观察器集
- angular - 从 npm-cache 在离线机器中安装 angular cli 后找不到模块'@angular-devkit/core'
- ios - [引脚纬度]:发送到实例的无法识别的选择器
- ruby-on-rails - 有没有办法在 RSpec 控制器测试中测试模板是否具有属性?
- macos - 在 Apple M1 上使用带有 clang 的 -march=native 标志
- html - 嵌套在其他 div 中的 div 右上角的绝对 div
- json - 在 React 中找不到模块
- azure - 将二进制数据写入 Azure HttpTrigger 函数中的 blob
- git - GitHub:将本地分支推送到远程的问题