具有相同类的JavaScript queryselector必须单击两次

我有两个项目正在做同样的事情；单击时，它们将打开，再次单击时，它们将折叠。它能工作，但不能按我希望的方式工作

单击项目时，它将打开当我单击第二个项目（尚未打开）时，它在第一次单击时不起作用，因为它仍然认为我正在忙于第二次单击。我确实理解这一点，但我不知道如何在纯JavaScript中修复这一点

我必须添加一个

AddEventListener

还是什么？因此，我想要的是，我可以单击所有项目，在第一次单击时打开它（再次单击时将其折叠），而不是单击两次

这是我的代码：

HTML:

<div class="area">Test title
   <div class="some content" style="display: none">blablbala</div>
</div>

测试标题
布拉布拉巴拉

---

jsiddle:

您应该将业务逻辑应用于

这个
元素，而不是第一个
元素

function areaCollapse() {
    var next = this.firstElementChild;

    if (this.classList.contains("open")) {
        next.style.display = "none";
        this.classList.remove("open");
    } else {
        next.style.display = "block";
        this.classList.add("open");
    }
}

演示：
回答得很好，谢谢。我给了你一票。这就解决了问题。。。而且它比我的代码写得好。非常感谢。我会接受的。