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

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

  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

是什么导致了这种行为？

给你的img打个电话

style="display: block;" 

属性。给你的img一个

style="display: block;" 

---

属性。样式只包含在元素的样式属性中定义的样式属性（即，

style=”“

），而不包含从

块或外部CSS文件继承的样式属性

---

用于检索样式信息的抽象方式。

元素。样式

仅包含在元素的样式属性中定义的样式属性（即

style=“”

），而不包含从

块或外部CSS文件继承的样式属性

---

用于获取样式信息的抽象方式。

元素的显示值可能不是以明确的“无”开头。试试这个：

  function toggle(image,list)
  {
    var listElementStyle=document.getElementById(list).style;
    if (!listElementStyle.display || 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";
    }
  }

---

元素的显示值不能以显式的“无”开头。试试这个：

  function toggle(image,list)
  {
    var listElementStyle=document.getElementById(list).style;
    if (!listElementStyle.display || 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";
    }
  }

---

您的

元素可能从CSS规则继承了

display:none

---

但是，由于元素的样式没有显式设置（内联），

elem.style.display

是

未定义的
您的
元素可能是从CSS规则继承的
display:none

但是，由于元素的样式没有显式设置（内联），
elem.style.display
是
未定义的
任何位于图像顶部或部分位于图像顶部的html元素（例如div），如果它也有任何类型的事件侦听器，都可能导致此行为。。使用开发人员工具栏之类的工具检查是否可以在图像前面找到任何元素……如果图像顶部或部分顶部的任何html元素（如div）也具有任何类型的事件侦听器，则可能导致此行为。。使用开发人员工具栏之类的工具检查是否可以在图像前面找到任何元素定位。。。