可折叠只能使用一次(不适用于BOOTSTRAP)

Question

我没有在这个项目中使用引导程序。在w3schools的帮助下，我制作了一个可折叠的段落，但我面临的问题是它只起作用一次。我不知道为什么

var coll = $("#aboutUsCollapsible");
var tmp = $("#mainCollapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.previousElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = 0;
tmp.show();
} else {
tmp.hide();
content.style.maxHeight = content.scrollHeight + "px";
}
});
}

.collapsible-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.collapsible {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapsible" id="mainCollapsible">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="collapsible-content">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<a class="button" id="aboutUsCollapsible">Learn More</a>

代码笔https://codepen.io/amrh910/pen/KKgZEdy

Answer 1

当您检查content.style.maxHeight时，它应该是这样的：

if (content.style.maxHeight !== "" && content.style.maxHeight !== "0px") {