在.load之后，div不会改变高度，但是在秒之后它会改变高度

Question

让我们直接进入代码：

$(".btn-slide").live("click", function(e){

  if (e.preventDefault) { 
   e.preventDefault(); 
  } 
  else { 
   e.returnValue = false; 
  }

  //deo za dobavljanje odgovarajuce stranice
  link = $(this).attr("href");

  if($('#post-content').hasClass("active")){
   $("#post-content").slideToggle("slow");
   $('#post-content').toggleClass("active");
  }

  $('#post-content').load(link);

  $("#post-content").slideToggle("slow");
  $('#post-content').toggleClass("active");

  $('#content').height($('#post-content').height()); return false;
 });

因此，我只需单击一下就可以将一些内容加载到当前页面/ div中，但内容div在第一次调用后不会调整大小。但当我再次点击链接时，它会调整大小...谁能解决这个问题？

Answer 1

问题是在slideToggle动画结束之前，$('#post-content').height()是未知的。因此，只要将调整大小逻辑放在slideToggle的回调函数中就可以解决这个问题。以下是为我工作的代码：

$(".btn-slide").live("click", function(e){

        link = $(this).attr("href");

        if($('#post-content').hasClass("active")){
            $("#post-content").slideToggle("slow");
            $('#post-content').toggleClass("active");
        }

        $('#post-content').load(link);

        $("#post-content").slideToggle("slow", function(){
            //deo za poravnavanje visina
            h=0;
            //velicina contenta zbog accordiona
            $('.sidebar-arch').children().each(function() {
                h = h + $(this).outerHeight(true) + 20;
            });

            $('#content').height(h);

            if($('#post-content').height() > $('#content').height()){
                $('#content').height($('#post-content').height());
            }

            $('#post-content').toggleClass("active");
        });

        return false;
    });

感谢大家的评论。我将学习如何更好地组织我的代码^_^

Answer 2

您的确切问题尚不清楚，但问题的原因是明确的。它与活动类有关。因为我们看不到活动类是什么--我不能确定。但让我们看看发生了什么：

Case 1 -- #post-content starts having active

 - Button is pressed
 - (slide is toggled)
 - Active is removed
 - Content is loaded
 - (slide is toggled)
 - Active is turned back on.


Case 2 -- #post-content starts not having active

 - Button is pressed
 - Content is loaded
 - (slide is toggled)
 - Active is turned on.

基于此，如果活动启动，则在第一次运行后不会发生变化。

如果active启动，则case 2运行一次，case 1从此运行。

听起来你想要确保case 1是唯一运行的东西，确保#post-content开始让类处于活动状态，你应该没问题。

另一方面，您的代码没有太多意义，所以您可能想要更改它、添加注释、重构等。