javascript - 显示/隐藏内容的脚本需要两次点击才能第一次执行

Question

我们使用以下代码在单击图像时显示/隐藏内容:

  function toggle(image,list)
  {
    var listElementStyle=document.getElementById(list).style;
    if (listElementStyle.display=="none")
    {
      listElementStyle.display="block";
      document.getElementById(image).src="images/down.png";
      document.getElementById(image).alt="Close list";
    }
    else
    {
      listElementStyle.display="none";
      document.getElementById(image).src="images/up.png";
      document.getElementById(image).alt="Open list";
    }
  }

这个函数是这样调用的:

<p>
<img src="images/up.png" alt="Open List" id="img39384" onClick="toggle('img39384','ul39384');">Agriculture
<ul id="ul39384" class="catList">
<li>
<a href="databases.jsp?cat=39386">Agriculture - Most Useful</a>
</li>
</ul>
</p>

第一次单击“up.png”时，需要两次不同的单击才能触发脚本并显示/隐藏内容。在第一次两次单击调用之后，单击一次将触发脚本。这种行为适用于所有浏览器——IE、Firefox、Opera、Safari 和 Chrome。

可能导致此行为的原因是什么？

Answer 1

你的 <ul>元素可能正在继承 display: none来自 CSS 规则。

但是，因为元素的样式没有明确设置(内联)，elem.style.display是undefined .