我想在按钮中隐藏表单。隐藏表单已完成,但问题是隐藏的表单区域大小显示为我的框下面的空白区域,因此我在按钮底部和按钮下方的内容之间有一个很大的空间,例如另一个按钮。
按钮代码
<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>
我想我正在寻找的效果是按钮保持其内部的形式,直到单击按钮,然后表单下拉显示在它下面。此外,如果可能的话,如果在表单显示表单被放回按钮内部时再次单击该按钮,那么在再次单击该表单之前它将不再可见。
答案 0 :(得分: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' ;
}
编辑:请注意,您需要使用'display'属性而不是'visibility'
答案 1 :(得分:2)
而不是style="visibility:hidden;"
使用display:none;
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>
答案 2 :(得分:2)
在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
答案 3 :(得分:0)
您应该使用css属性“display”,而不是“visibility”。 见CSS Properties: Display vs. Visibility