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>元素可能是从CSS规则继承display: none。

但是，由于未明确设置元素的样式（内联），elem.style.display为undefined。

Answer 2

element.style仅包含在元素的样式属性（即style=""）中定义的样式属性，而不包含从<style>块或外部继承的样式属性CSS文件。

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

Answer 3

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

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

Answer 4

给你的img一个

style="display: block;"

最初加载页面时的

属性。

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

4 个答案: