JavaScript 具有相同 class 的查询选择器必须点击两次

Question

我有两个项目是一样的；单击时，它们将打开，再次单击时，它们将折叠。它可以工作，但它无法按我希望的方式工作。

当您单击某个项目时，它会打开。 当我点击第二个项目（尚未打开）时，第一次点击时它不起作用，因为它仍然认为我在忙于第二次点击。我明白这一点，但我不知道如何在纯 JavaScript 中解决这个问题。

我是否必须添加 AddEventListener 之类的东西？所以我想要的是我可以点击所有项目，在我第一次点击时打开它（再次点击时折叠它），而不是点击两次。

这是我的代码：

HTML:

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

JSFiddle: http://jsfiddle.net/nb1ao39k/

Answer 1

您应该将业务逻辑应用到 this 元素而不是第一个 .area 元素：

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");
    }
}

演示： http://jsfiddle.net/nb1ao39k/1/

JavaScript 具有相同 class 的查询选择器必须点击两次

JavaScript queryselector with same class must click twice

html

javascript

click