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

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

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

Answer 3

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

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

隐藏的表单显示空白区域

4 个答案: