JS一键切换（而不是两次单击） - 切换元素的默认值 [英] JS one-click Toggle (not two clicks) - default value of toggled element

问题描述

为什么我们需要点击两次（ http://jsfiddle.net / xL8hyoye / 4 / ）：

html：

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

css： #foo {display：none;}

js：

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'none')
      e.style.display = 'block';
   else
      e.style.display = 'none';
}

---

strong>一次点击文字消失（ http://jsfiddle.net/xL8hyoye/5/）：

html：

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" style='display:none'>This is foo</div> <!-- add display style here -->

css：<！ - delete ccs here - > / code>

css: <!-- delete ccs here -->

js：

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'none')
      e.style.display = 'block';
   else
      e.style.display = 'none';
}

推荐答案

检查style.display属性为空

Check if the style.display property is empty

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block' || e.style.display == '')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

这篇关于JS一键切换（而不是两次单击） - 切换元素的默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！