如何解决如何使HTML可折叠按钮默认展开？
我有一个带有多个可折叠按钮的HTML页面。我希望在加载页面时展开一个按钮。现在，默认情况下所有按钮都处于折叠状态。如何更改HTML或CSS，以使特定按钮（“当前周”）展开，而其余按钮合拢？以下是相关代码：
<!DOCTYPE html>
<html>
<head>
<title>
Prior_Recordings_HTML5
</title>
</head>
<link href="CSS/my_site.css" rel="stylesheet" type="text/css" />
<body>
<table class="table_for_collapse">
<tr>
<td>
<button class=collapsible>Current Week—November 8,2020</button>
<div class=collapsible_content>
<a href="https://my_site_link_1" target="_blank" class="link3"
title="Sunday 11/8/2020">
Click here for Sunday,11/8/2020<br />
</a>
<a href="https://my_site_link_2" target="_blank" class="link3"
title="Monday 11/9/2020">
Click here for 11/9/2020<br />
</a>
</div>
</td>
</tr>
<tr>
<td>
<button class=collapsible>Prior Week 1—November 1,2020</button>
<div class=collapsible_content>
<a href="https://my_site_link_3" target="_blank" class="link3"
title="Sunday 11/1/2020">
Click here for Sunday,11/1/2020<br />
</a>
<a href="https://my_site_link_4" target="_blank" class="link3"
title="Monday 11/2/2020">
Click here for 11/2/2020<br />
</a>
</div>
</td>
</tr>
</table>
<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>
这是CSS：
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
font-size: 15px;
padding-top: 6px;
padding-bottom: 6px;
text-align: left;
width: 450px;
max-width: 1000px;
}
.active,.collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.collapsible_content {
/*
padding: 0 18px;
*/
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #EEE8AA;
}
感谢您的关注。
解决方法
也许我听不懂，但是为什么不在主线程中运行事件侦听器函数中运行的代码呢？
在以后使用日期的情况下，您可以为其创建单独的函数，如下所示：
function collapse_this_week(){
coll[0].classList.toggle("active");
var content = coll[0].nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
}
您可以将一个参数传递给函数，以确定在开始使用日期时根据日期扩展哪个按钮。
JSFiddle使用您的代码： Here
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
