Question

我有两件相同的东西;单击时，它们将打开，再次单击时，它们将崩溃。它有效，但它不起作用我希望它如何工作。

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

我是否必须添加<div class="area">Test title <div class="some content" style="display: none">blablbala</div> </div>或其他内容？所以我想要的是我可以点击所有项目，在我第一次点击时打开它（并在再次点击时折叠它），而不是点击两次。

这是我的代码：

HTML：

{{1}}

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

DEMO： http://jsfiddle.net/nb1ao39k/1/

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

1 个答案: