Question

我有一个div和一个按钮，我想在点击时显示/隐藏div：

<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>

这段剧本：

function showDiv() {
   document.getElementById('element').style.display = "block";
   if( ... )
   document.getElementById('element').style.display = "none";
}

div的显示样式为none，因此隐藏.js脚本的第一行将该值更改为block，因此现在显示div。现在我需要一些东西来反转第一行，以防按钮再次触发。所以我认为条件语句会这样做，但我不知道如何构建它。东西线：＆＃34;如果显示样式为其块，则执行{}＆＃34;之间的代码。有什么想法吗？

Answer 1

修改

＆＃13;

function toggleDiv(elementId, button, textOn, textOff) {
  var style = document.getElementById(elementId).style;
  if( style.display == "none" ) {
    style.display = "block";
    button.innerHTML = textOn;
  } else {
    style.display = "none";
    button.innerHTML = textOff;
  }
}

＆＃13;

<button name="info" onclick="toggleDiv('element', this, 'Hide Contact Information', 'Show Contact Information')">Show Contact Information</button>
<div align="center" id="element" style="display: none;">bla</div>

＆＃13;

原始答案

function toggleDiv() {
    if( document.getElementById('element').style.display == "none" ) {
        document.getElementById('element').style.display = "block";
    } else {
        document.getElementById('element').style.display = "none";
    }
}

Answer 2

直接使用浏览器DOM非常烦人，您的解决方案可能无法在所有浏览器中使用。你应该使用一些javascript框架，如jQuery，prototype或mootools。在jQuery中你想要做的就是这么简单：

$("#element").toggle()

如果您坚持使用原始javascript，可以试试这个：

function showDiv() {
   if( document.getElementById('element').style.display == 'block' )
   document.getElementById('element').style.display = "none";
   else
   document.getElementById('element').style.display = "block";
}

Answer 3

<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>
<script>
function showDiv() {
   var div = document.getElementById('element').style.display;
   if( div == 'block' )
      document.getElementById('element').style.display = "none";
    else 
    document.getElementById('element').style.display = "block";
}
</script>

如何反转div onclick的隐藏事件

3 个答案:

修改

原始答案