切换时，间距减小答案

【问题标题】：When Toggle, spacing decreases切换时，间距减小
【发布时间】：2017-05-12 16:51:59
【问题描述】：

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

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


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

【问题讨论】：

没有什么叫做 mytranscript，所以从这段代码中没有什么清楚你想要实现的目标。

标签： jquery html css button toggle

【解决方案1】：

jQuery toggle() 方法通过将元素的 display: 属性切换为“none”来隐藏内容。根据 CSS 规范，该元素被移除，其他元素重新流动以占用其空间。

您想改用 CSS visibility: hidden 属性。所以它看起来像这样：

<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 很好地解释了可见性：隐藏和显示：无之间的区别。

【讨论】：