为什么切换功能只有在双击后才能工作?(Javascript、CSS)

Question

遵循w3指南创建可折叠的div，但要在React应用程序中创建。我制作的卡片只有在双击后才会折叠，而不是单击一次。我能找到的唯一区别是，我没有使用<script>，而是使用onClick={function}。

这是我的代码：

卡片组件文件顶部：

function collapseElement() {
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
console.log(i);
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
}

卡内组件：

<div>
<button type="button" className="collapsible" onClick={collapseElement}>
<div className="collapsible-title">
{props.title}
</div>
</button>
<div className="content">
{props.children}
</div>
</div>

和CSS:

.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;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}

提前感谢！

Answer 1

您已经设置了按钮的onClick来运行collapseElement，然后它将遍历带有"可折叠的"；类，并向它们添加另一个单击事件侦听器来执行折叠。

要么只运行为每个项目添加一个新的点击侦听器的函数，要么只拆分切换内容的实际函数，并将其作为onClick标记。