隐藏表单显示空白区域答案

【问题标题】：Hidden form displays empty area隐藏表单显示空白区域
【发布时间】：2014-01-28 10:40:36
【问题描述】：

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

按钮代码

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

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

【问题讨论】：

使用show/hide 代替visibility?
他没有使用 jQuery 来显示/隐藏用户

标签： javascript jquery html css forms

【解决方案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' ;
}

编辑：请注意，您需要使用“显示”属性而不是“可见性”

【讨论】：

如果再次点击时它会回到按钮中，像梦一样工作会好很多，但至少它完成了工作
+1 : 但与correct html 一起提到下一次出了什么问题:)

【解决方案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

【讨论】：

我知道这需要 jquery 才能使用，但您可能想在答案中说明这一点，以便其他人通过这个很棒的答案也可以获得他们需要的信息来让它工作。再次感谢老兄，你摇滚

【解决方案3】：

用display:none;代替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>

【讨论】：

干杯老兄。与我使用的答案相同，但嘿，它是相同的，所以我可以改用这个。谢谢。

【解决方案4】：

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

【讨论】：