显示和隐藏表单

Show and hide form

本文关键字：表单 隐藏 显示      更新时间：2023-09-26

我有一行有一个形式。

<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>
所以现在它隐藏了，当我单击按钮时

它会出现，我现在需要做的就是在再次单击按钮时让它消失。它必须隐藏在开始时。

试试这个

function showDiv() {
   if(document.getElementById('magic').style.display == "block")
       document.getElementById('magic').style.display = "none";
  else
      document.getElementById('magic').style.display = "block"
}
.display_magic {
    display: none;
}
<div class="row display_magic" id="magic">
<h1>helloworld</h1>
</div>
<button onclick="showDiv()"> Add new request</button>

<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>

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

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

将 showDiv（） 函数更改为：

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

这样做：

<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>

你可以像这样重写方法

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

小提琴考试

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)

您的代码将受益于"切换"函数

现在情况如何：

<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>

奖励：您有一个功能来切换可见性，您可以重复使用

请使用 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>
相关文章：