Javascript 为什么我的按钮需要点击两次，事件处理程序才能第一次工作，但之后只需点击一次？

我希望访问者能够展开/折叠某些部分，并使用：

<input onclick="return toggleDiv('xx')" 
       type="button" 
       class="button" 
       value="click here to expand/collapse"/>

第一次单击按钮时，按钮不起作用，随后的单击（在任何按钮上）都可以正常工作

这里有相关的对话：

但是我不明白答案（太专业了；-），

---

有人能解释一下吗？

您的“xx”div的初始样式可能会引起一些麻烦

解释 假设您配置了一个样式表规则，使

div

s最初处于隐藏状态。比如：

div { display: none }

（…当然，选择器（

div

）的宽度可能会小一些）

这看起来工作正常，因为页面将加载所有隐藏的

div

元素（“折叠”）。但是，元素本身的style.display属性没有实际值——它们只是从样式表继承了值。因此，在代码中，用于检查元素是否隐藏的测试：

if(e.style.display=="none"){

…将失败，错误地将目标标识为可见，并导致

style.display

属性设置为“none”（该属性没有可见效果，因为元素已被样式表隐藏）。然后，下次单击按钮时，您上次设置的值将导致文本成功，并且您的例程将

style.display

设置为“block”

纠正此问题的简单方法是简单地反转测试并检查“阻塞”：

…但是，如果您将某些元素配置为初始可见，则这将崩溃：相反，您将遇到相同的问题，第一次单击按钮无法产生任何可见效果。要获得更健壮的行为，需要测试元素上实际处于活动状态的样式：

function getStyle(el, name)
{
  // the way of the DOM
  if ( document.defaultView && document.defaultView.getComputedStyle )
  {
    var style = document.defaultView.getComputedStyle(el, null);
    if ( style )
      return style[name];
  }
  // IE-specific
  else if ( el.currentStyle )
    return el.currentStyle[name];
  
  return null;
}

function toggleDiv(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(getStyle(e, "display") == "none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}

---

在这里，我们使用一个助手函数，

getStyle（）

，以跨平台的方式检索活动值。另请参见：，

类似的内容可能适合您。但是把它放在文件的开头。windowonload函数很重要，因为在处理输入字段之前需要加载DOM

<input id="divOpener" rel="xx" type="button" class="button" value="click here to expand/collapse"/>

---

为了保存所有额外的Javascript代码以获得样式等，一个简单的修复方法是将隐藏CSS添加到元素本身

<div class="yourclass" style="display:none;">content</div>

内容

编辑

我决定更好地解释我的答案。我假设您没有隐藏默认情况下要切换的

div

，因此它是可见的，但是当调用

e.style.display

时，结果不会是

none

也不会是

block

，因为尚未设置样式

---

相反，您正在检索一个空字符串，这意味着您第一次单击它时，else语句正在触发；第一次单击时，

div

显示被设置为无，这样下一次单击将检索值为

none

，因此当然会将其更改为

block

，更容易实现

var a=1;
function toggleDiv(xx){
  var e=document.getElementById(xx);

  if(a==1){
    e.style.display="block";a=0;
  } else {
    e.style.display="none";
  a=1;
  }

}

---

您要寻找的简单答案是添加

显示：无到内联样式。这样，当你看着

if (x.style.display == 'none')

它会变成现实
 Shog9的回答使我免于一个晚上的挫折。谢谢

然而，有一个比他提出的更简单的解决方案。秘密在于简单地切换条件的顺序。i、 e

if(e.style.display == "block"){
    e.style.display="none"
} else {
    e.style.display="block"
}

这里的观点是，该条件可能会因为两个不同的原因而失败：如果无法获得该值，它无论如何都会做正确的事情。
xx div的定义/样式是什么？我要做的第一件事是打开FireBug（firefox javascript开发工具），设置断点iside toggleDive，然后逐步执行，确保一切如我所想。如果不想处理这个问题，可以在函数中设置do alert（e.style.display）。这可能会让我们了解一些情况。就在第一个if语句之后，添加以下行：alert（“display is'+e.style.display+”）；然后再次运行代码。这应该有助于你理解发生了什么。进一步信息：页面验证，并且在Chrome中需要相同的第一次双击，即Firefox。回答：谢谢你花时间解释清楚Jaime。我现在明白了，并且让它工作了。你可以在这里看到你的手工作品：www.alanarnoldguitars.co.uk/guitar\u repairs.htm再次感谢，如果这不起作用，请说明你的要求，我们可以从那里开始。。。
var a=1;
function toggleDiv(xx){
  var e=document.getElementById(xx);

  if(a==1){
    e.style.display="block";a=0;
  } else {
    e.style.display="none";
  a=1;
  }

}

if (x.style.display == 'none')

if(e.style.display == "block"){
    e.style.display="none"
} else {
    e.style.display="block"
}