Toggle时，间距减小

Question

有谁知道如何阻止切换效果导致切换时出现额外的间距？切换不允许我的内容间距保持不变。目前我切换并且当内容不显示时间距减小，然后在切换内容显示时增加。下面我添加了我所做的基本代码。谢谢！！

<div class="button_border"><button onclick="myFunction()">Transcript</button></div>
<div id="content">
</div>


<script>
$(document).ready(function() {
    $("button").click(function(){
        $("#mytranscript").toggle();
    });
});
</script>

Answer 1

jQuery toggle() 方法通过切换元素的显示来隐藏内容：属性到 "none." 根据 CSS 规范，该元素和其他元素被删除重流占用其space.

您想改用 CSS 可见性：隐藏属性。所以它看起来像这样：

<div class="button_border"><button onclick="myFunction()">Transcript</button></div>
<div id="content">
</div>


<script>
$(document).ready(function() {
    $("button").click(function(){
      if ( $(this).css('visibility') == 'hidden' )
         $(this).css('visibility','visible');
      else
         $(this).css('visibility','hidden');
    });
});
</script>

Here 很好地解释了 visibility:hidden 和 display:none 之间的区别。

Toggle时，间距减小

When Toggle, spacing decreases

html

css

jquery

button

toggle