javascript - 添加了事件监听器，但需要点击 2 次

Question

我已将事件监听器添加到 $(document).ready 上的一些 div。但是，第一次需要单击两次才能触发事件(或至少要获得结果。)

我正在添加一个点击处理程序并将子节点显示或隐藏为 Accordion 。有什么想法吗？

 $(document).ready(function(){ 
      headers=document.getElementsByClassName("headerH");
      for(var i=0;i<headers.length;i++){
          var headline=headers[i].firstChild.innerText;
          headers[i].firstChild.innerText="+"+headline;
          headers[i].addEventListener('click', accord, false);
      }
  }); 

function accord(){
    listofnodes=this.children;
    for (var i=1; i<listofnodes.length; i++){
        var headline=listofnodes[0].innerText;
        if (listofnodes[i].style.display=="none"){
            listofnodes[i].style.display="block";
            listofnodes[0].innerText="-"+headline.substring(1);
        }
        else {
             listofnodes[i].style.display="none";
             listofnodes[0].innerText="+"+headline.substring(1);
        }
    }
}

Answer 1

您的问题是 javascript 属性 style.display 在第一次通过时等于空字符串。初始显示属性不是从您的 CSS 表中填充的。

如果你翻转你的 if/else 语句，你应该在第一次点击时让它工作:

if (listofnodes[i].style.display=="block"){
    listofnodes[i].style.display="none";
    listofnodes[0].innerText="+"+headline.substring(1);
}
else {
    listofnodes[i].style.display="block";
    listofnodes[0].innerText="-"+headline.substring(1);
}

编辑:对于那些希望以最恰当的方式完成此操作的人:

您可以使用 Window.getComputedStyle 从样式表中提取默认值。这需要更多的代码，但适用于更多情况。

var element = listofnodes[i];
var display = element.style.display || getComputedStyle(element).getPropertyValue("display");
if (display=="none"){
    element.style.display="block";
    listofnodes[0].innerText="-"+headline.substring(1);
}
else {
    element.style.display="none";
    listofnodes[0].innerText="+"+headline.substring(1);
}