隐藏窗体显示空白区域

Question

我想在按钮内隐藏窗体。隐藏表单已经完成了，但问题是隐藏的表单区域大小显示为我盒子下面的空白区域，所以我在按钮底部和按钮下面的内容之间有一个很大的空间，例如，另一个按钮。

按钮代码

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

我想我寻找的效果是按钮保存它里面的形式，直到按钮已被点击，然后窗体下降到它下面显示。另外，如果可能在表单显示表单被放回到按钮内时再次单击该按钮，以致它不再可见，直到再次单击它为止。

Answer 1

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

jQuery的

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

演示FIDDLE

Answer 2

您应该使用css属性“display”，而不是“visibility”。 参见CSS Properties: Display vs. Visibility

Answer 3

代替style="visibility:hidden;"使用display:none;

显示：无将删除页面的正常流动的元件，从而允许其他元素来填充
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> 

Answer 4

正确的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> 

和javascript：

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

编辑：请注意，您需要使用 '显示' 属性，而不是 '知名度'