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（）方法通过将元素的display：property切换为＆＃34; none来隐藏内容。＆＃34;根据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很好地解释了visibility：hidden和display：none之间的区别。

切换时，间距减小

1 个答案: