如何解决可折叠 div css - 需要它所以开始关闭
我有一个可折叠的潜水,它工作正常,但我希望它在默认情况下显示为关闭状态,因为当前元素在进入页面时显示。
如何更改我发现的这个 css 以使可折叠项目在默认情况下关闭?
这里是css
/*
CSS for the main interaction
*/
.accordion > input[type="checkBox"] {
position: absolute;
left: -100vw;
}
.accordion .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion > input[type="checkBox"]:checked ~ .content {
height: auto;
overflow: visible;
}
.accordion label {
display: block;
}
<section class="accordion">
<input type="checkBox" name="collapse" id="handle1" checked="checked">
<h2 class="handle">
<label for="handle1"> text</label>
</h2>
<div class="content">
<p><strong>Overall Impression:</strong> text </p>
<p><strong>History:</strong> text</p>
</div>
</section>
解决方法
我假设您的可折叠 div 是 .accordion .content,因此您需要将以下内容作为 css 的一部分
common_id
我需要查看您的 html 和 js 代码才能确定。
,<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>
<style>
.collapsible {
cursor: pointer;
width: 100%;
}
.active,.collapsible:hover {
background-color: #555;
}
.content {
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
<button class="collapsible">Click to Expand</button>
您需要做的就是删除 HTML 中 checked="checked"
上的 input
,一切顺利。
/*
CSS for the main interaction
*/
.accordion > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion > input[type="checkbox"]:checked ~ .content {
height: auto;
overflow: visible;
}
.accordion label {
display: block;
}
<section class="accordion">
<input type="checkbox" name="collapse" id="handle1">
<h2 class="handle">
<label for="handle1"> text</label>
</h2>
<div class="content">
<p><strong>Overall Impression:</strong> text </p>
<p><strong>History:</strong> text</p>
</div>
</section>
在您提供的代码中,javascript 实际上并没有做任何事情。 在这里,我让您的代码使用以下 html...(我将转换时间增加到 1 秒,因此效果更明显)。
.accordion > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion .content {
overflow-y: hidden;
max-height: 0;
transition: max-height 1s ease;
}
.accordion > input[type="checkbox"]:checked ~ .content {
max-height: 100vh;
}
.accordion label {
display: block;
}
.content {
background-color: wheat;
}
<section class="accordion">
<input type="checkbox" name="collapse" id="handle1">
<h2 class="handle">
<label for="handle1"> text</label>
</h2>
<div class="content">
<p><strong>Overall Impression:</strong> text </p>
<p><strong>History:</strong> text</p>
</div>
</section>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。