Question

我创建了一个jquery代码，您可以单击按钮来显示或隐藏div。但是，当我切换div时，容器会在打开时稍微移动一下。我用谷歌搜索，到处说它不断扩大的div正在失去它的高度。我如何解决它？我无法设置该div的高度，因为在div中我有更多不断扩展的内容，比如你点击的小段落＆＃34;阅读更多＆＃34;然后出现更多文本，因此扩展div的高度总是在变化。

这是我的代码：

<script type="text/javascript">
    $(window).load(
      function ()
      {
        $(".expandbutton").click(
          function ()
          {
            $("#mainexpand").toggle("fast");
          }
        );
      }
    );
</script>

那么当您点击.expandbutton div来切换#mainexpand div时，如何防止内容四处移动？

Answer 1

$(document).ready(function(){
  $("#mainexpand").hide();

 $( ".expandbutton" ).click(function() {

  if($("#mainexpand").is(":visible")){
    $("#mainexpand").hide();
  } 
   else {
   $("#mainexpand").show();
  }

 });
 });

Answer 2

您需要设置可见性，而不是使用display：

显示或隐藏它

$(window).load(function(){
 $( ".expandbutton" ).click(function() {
  if($("#mainexpand").css("visibility") == "visible"){
    $("#mainexpand").css("visibility","hidden");
  } else {
   $("#mainexpand").css("visibility","visible");
  }
 });
 });

Jquery切换使容器移动

2 个答案: