为什么我的按钮需要点击两次才能使事件处理程序第一次工作，但之后只需一次？ [英] Why does my button need to be clicked twice for the event handler to work the first time, but thereafter just once?

问题描述

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

I want the visitor to be able to expand/collapse some sections, and am using:

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

在我有以下功能：

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

第一次点击一个按钮不起作用，后续点击（在任何按钮上）工作正常。

The first time a button is clicked it doesn't work, subsequent clicks (on any of the buttons) work OK.

这里有相关的对话：
按钮需要点击两次才能触发功能

但我不明白答案（太技术性了，-)，
有人可以帮忙解释一下吗？

but I don't understand the answer (too technical;-), could someone help explain it please?

推荐答案

说你有xxdiv的初始样式可能会导致一些麻烦配置为使您的 div 最初被隐藏的样式表规则。如下：

Say you have a stylesheet rule configured to make your divs initially hidden. Something like:

div { display: none }

（...当然，选择器（ div ）可能会稍微宽一些）

(...where of course the selector (div) will probably be a little bit less broad)

这看起来可以正常工作，因为页面将加载所有的 div 元素隐藏（折叠）。但是，元素本身上的style.display属性没有实际的值，它们只是继承样式表中的值。所以在你的代码中，你用来检查元素是否被隐藏的测试：

This would appear to work correctly, in that the page will load with all of your div elements hidden ("collapsed"). However, there's no actual value for the style.display property on the elements themselves - they're merely inheriting the value from the stylesheet. So in your code, the test you're using to check if the element is hidden:

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

...将失败，错误地将目标标识为可见，并导致 style.display 属性设置为none（由于元素已被样式表隐藏），因此没有可见效果。然后，点击按钮的 时间，您最后一次设置的值将导致文本成功，您的例程将设置 style.display toblock。

...will fail, incorrectly identifying the target as being visible, and causing the style.display property to be set to "none" (which has no visible effect, since the element had already been hidden by the stylesheet). Then the next time the button is clicked, the value you set the last time around will cause the text to succeed, and your routine will set style.display to "block".

正确的方法是简单地逆转你的测试并检查block：

The easy way to correct for this is to simply reverse your test and check for "block":

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

...但是，如果您将某些元素配置为初始可见，则会崩溃：您将碰到相反的问题，第一个按钮单击不会有任何可见的效果。要获得更强大的行为，您需要测试元素上实际活动的样式：

...however, this will fall apart if you have some elements configured to be initially visible: you'll just run into the same problem in reverse, with the first button click failing to have any visible effect. For a more robust behavior, you'll need to test the style that's actually active on the element:

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（） ，以跨平台方式检索活动值。另请参见： getComputedStyle（） ， currentStyle

Here we use a helper function, getStyle(), to retrieve the active value in a cross-platform manner. See also: getComputedStyle(), currentStyle

这篇关于为什么我的按钮需要点击两次才能使事件处理程序第一次工作，但之后只需一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！