Question

我有一行有表格。

<div class="row display_magic" id="magic">
<h1>helloworld</h1>
</div>

这是我的风格。

.display_magic {
    display: none;
}

这是我写的javascript，

<script>
function showDiv() {
   document.getElementById('magic').style.display = "block";
}
</script>

这是触发功能的按钮

<button onclick="showDiv()"> Add new request</button>

所以现在它隐藏了，当我点击它出现的按钮时，我现在需要做的就是让它在再次点击按钮时消失。它必须隐藏在一开始。

Answer 1

试试这个

＆＃13;

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

＆＃13;

.display_magic {
    display: none;
}

＆＃13;

<div class="row display_magic" id="magic">
<h1>helloworld</h1>
</div>

<button onclick="showDiv()"> Add new request</button>

＆＃13;

Answer 2

<button onclick="toggleDiv()"> Add new request</button>  

<script>
      var visible = false;

    function toggleDiv() {
      visible ? document.getElementById('magic').style.display = "none" : document.getElementById('magic').style.display = "block";

      visible = !visible;
    } </script>

Answer 3

只需在函数中添加一个条件，首先检查它是否显示，然后采取相应措施。您可以使用三元运算符将其组成一行：

function showDiv() {
   document.getElementById('magic').style.display = document.getElementById('magic').style.display == "none"?"block":"none";
}

Answer 4

这样做：

<script>
    var hasShow=false;
    function showDiv(){
         if(hasShow){
              document.getElementById('magic').style.display = "none";
              hasShow=false;
         }else{
              document.getElementById('magic').style.display = "block";
              hasShow=true;
         }
    }
</script>

Answer 5

将showDiv（）函数更改为：

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

Answer 6

你可以像这样重写方法

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

}

Answer 7

Fiddle examle

var showDiv = function () {
   var magic = document.getElementById('magic');
   magic.style.display === "block" ? magic.style.display = "none" : magic.style.display = "block"
}

document.getElementById('btn').addEventListener('click', showDiv, false)

Answer 8

您的代码将受益于＆＃34;切换＆＃34;功能

现在怎么样：

<script>
function showDiv() {
   document.getElementById('magic').style.display = "block";
}
</script>

那会是怎样的：

<script>
function toggleVisibility(elementId) {
    var visible = "block";
    var hidden = "none";

    var visibility = document.getElementById(elementId).style.display;
    if(visibility == visible) 
        display = hidden;
    else
        visibility = visible;

    document.getElementById(elementId).style.display = visibility;
}

function showDiv() { // maybe "toggleDiv" would be a better name for this now
   toggleVisibility("magic");
}
</script>

奖励：您可以切换可以重复使用的可见性

Answer 9

请使用Jquery切换：

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#magic").toggle();
    });
});
</script>
</head>
<body>

<button> Add new request</button>

<div class="row display_magic" id="magic">
<h1>helloworld</h1>
</div>

</body>
</html>

显示和隐藏表单

9 个答案: