在以下代码中,我在另一个可折叠部分中有一个可折叠部分。当我打开最外面的可折叠部分时,它工作正常并向我显示它下面的内容。但是当我尝试打开内部可折叠部分时,它不会扩展到足以让我看到所有内容。请运行以下程序以查看问题。
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";
}
});
}
.collapsible {
background-color: #2d2e2e;
color: white;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: black;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: left;
margin-right: 5px;
}
.active:after {
content: "\2212";
}
.collapse_content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.1s ease-out;
}
<button class="collapsible">Full Collapsible Set:</button>
<div class="collapse_content">
<button class="collapsible">Open Section 1</button>
<div class="collapse_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="collapse_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.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="collapse_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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
如果不需要动画,您可以设置max-height
为fit-content
否则,您可以将元素添加scrollHeight
到其父元素的高度中。并且为了避免设置太大的数字(如果同一个子项被多次打开/关闭),您可以添加transitionend
甚至侦听器来设置max-height
父项的正确设置:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
// managed by css
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
content.parentNode.style.maxHeight = (parseInt(content.parentNode.style.maxHeight) + content.scrollHeight) + "px";
}
});
coll[i].nextElementSibling.addEventListener("transitionend", function()
{
this.parentNode.style.maxHeight = this.parentNode.scrollHeight + "px";
});
}
.collapsible {
background-color: #2d2e2e;
color: white;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: black;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: left;
margin-right: 5px;
}
.active:after {
content: "\2212";
}
.collapse_content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.1s ease-out;
}
<button class="collapsible">Full Collapsible Set:</button>
<div class="collapse_content">
<button class="collapsible">Open Section 1</button>
<div class="collapse_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="collapse_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.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="collapse_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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句