您确实必须将的css更改为.content，display: block;而且还必须更改JavaScript，以便在单击打开的可折叠对象时将其关闭。否则，您必须单击两次才能将其关闭，因为第一次单击时它仍然没有任何内容content.style.display。
特别是这里的检查：
if (!content.style.display || content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
请参见下面的代码段：
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.display || content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: block;
overflow: hidden;
background-color: #f1f1f1;
}<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="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>
<p>Collapsible Set:</p>
<button type="button" class="collapsible">Open Section 1</button>
<div class="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 type="button" class="collapsible">Open Section 2</button>
<div class="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 type="button" class="collapsible">Open Section 3</button>
<div class="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>
谢谢！！！然后我走在正确的轨道上-尽管我需要将.content的CSS更改为display：block; 但我不知道该如何处理JavaScript。我仍然不了解JS更改的工作原理，但是它确实可以实现我想要的功能，但愿我了解JS。但是，现在我的CSS出现了问题，因为我向我添加了border-radius。因此，当它打开时，它可以正常工作，但是当它关闭时，我不知道如何在.container按钮上使用圆角边框-我猜该如何给“未激活”的CSS代码？
别客气！您可以
console.dir()用来检查html元素的属性，这可能有助于您理解。我似乎无法弄清楚如何共享我的CSS代码以了解我的意思是关于.container按钮在折叠时没有正确的圆角半径的问题...
上面听起来像是与该问题不同的问题，我建议使用圆角半径半径问题创建另一个问题。
console.dir()与的使用方式相同console.log()，它只是为您提供有关对象属性的更多信息。