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

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

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