Question

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

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

 $(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);
}

Answer 2

我怀疑问题在这里：

listofnodes[i].style.display=="none"

第一次点击可能会返回false。原因是因为DOM元素实际上还没有display属性。然后，当您单击时，else块会添加该属性。因此，您的第二次点击将返回true。

我通常通过这样做来解决这个问题：

listofnodes[i].style.display = listofnodes[i].style.display === (undefined || 'block') ? "none" : "block";

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

2 个答案: