Question

我正在使用这样的简单切换：

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

我的HTML就像这样：

 <div id="income">
 <h5 onclick="toggle_visibility('incometoggle');">INCOME</h5>
 <div id="incometoggle">
    <h6>Income Total</h6> 
 </div>    </div>

目前，我需要在标题上单击两次以使div关闭。如何只需点击一下即可将其关闭？

http://jsfiddle.net/4w3ynj40/

Answer 1

首先检查条件显示无

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

jquery的

  $("h5").click(function() {
    $("#incometoggle").toggle(); 
  });

DEMO

Answer 2

var hFive = document.getElementsByTagName('h5')[0];
hFive.addEventListener('click', function () {
    var e = document.getElementById('incometoggle');
    if (e.style.display == 'block') {
        e.style.display = 'none';
    } else {
        e.style.display = 'block';
    }
}, false);

修改内联JavaScript的部分，我使用addEventListener。

DEMO

如何在一次点击而不是两次点击时触发切换

2 个答案: