Javascript 隐藏窗体显示空白区域

我想在按钮中隐藏一个窗体。隐藏表单已完成，但问题是隐藏表单区域大小在我的框下显示为空白区域，因此按钮底部和按钮下方的内容（例如另一个按钮）之间有很大的空间

按钮代码

<button class="myButtonl" onclick='showForm();'>Create a Player</button>

创建一个播放器

表格代码

<div id="div1" style="visibility:hidden;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

团队名称：

Javascript

<script>
    function showForm() { 
        document.getElementById('div1').style.visibility= 'visible' ;
    }
</script>

函数showForm（）{
document.getElementById（'div1'）。style.visibility='visible'；
}

---

我想我正在寻找的效果是，该按钮将表单保持在其内部，直到单击该按钮，然后表单将下拉显示在其下方。此外，如果在表单显示时再次单击按钮，则表单可能会被放回按钮内部，因此在再次单击之前，表单将不再可见。

您应该使用css属性“display”，而不是“visibility”。 请参见而不是

style=“可见性：隐藏；”

使用

显示：无

显示：无从页面的正常流中删除元素，允许其他元素填充

visibility:hidden
将元素保留在页面的正常流程中，这样它仍然会占用空间

<div id="div1" style="display:none;">
   <form action="team.php" method="POST" name="profiles">
       <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
   </form>
</div>

<script>
  function showForm() { 
     document.getElementById('div1').style.display= 'block' ;
  }
</script>


团队名称：
函数showForm（）{
document.getElementById（'div1'）.style.display='block'；
}
正确的html：

<div id="div1" style="display:none;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

编辑：请注意，您需要使用“显示”属性，而不是jquery中的“可见性”
使用切换选项

HTML

     <button class="myButtonl" onclick='showForm();'>Create a Player</button>

<div id="div1" style="display:none;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

演示
使用
show/hide
而不是
visibility
？他并不是为了使用jQuery来显示/隐藏像梦一样的工作，如果再次单击时它会返回到按钮中会更好，但是嘿，至少它完成了任务+1：但是使用
正确的html
下次再提到错误：）干杯，伙计。和我用过的答案一样，但这是同一个，所以我可以用这个来代替。谢谢。我知道这需要jquery来使用，但你可能想在答案中说明，这样其他人也能从这个很棒的答案中得到他们需要的信息来让它工作。再次感谢你，老兄，你太棒了
     <button class="myButtonl" onclick='showForm();'>Create a Player</button>

<div id="div1" style="display:none;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

function showForm() { 
   $('#div1').toggle();
}