在下面的代码中,我在另一个可折叠部分中有一个可折叠部分。当我打开最外面的可折叠部分时,它工作正常并向我显示它下面的内容。但是当我尝试打开内部可折叠部分时,它不会扩展到足以让我看到所有内容。请运行以下程序查看问题。
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>
答案 0 :(得分:1)
如果不需要动画,您可以将 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>