Question

我已经看了几个关于SO的例子，但无济于事。可能是因为我的情况略有不同。

If you look at this example site，所有内容从div #panel向下滑动，动态内容同时加载。它可以工作，但面板固定为350px，无论如何。如果我知道所有内容都适合那个空间，那就好了，但我知道它不会。我需要找出一个公式，让div在各种高度下滑，具体取决于加载的内容。

这是我的代码：

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache:false});
jQuery("li.btn-slide a").click(function(){
    jQuery("#panel").slideDown( "slow" );
    var post_url = jQuery(this).attr("href");
    var post_id = jQuery(this).attr("rel");
    jQuery("#page-con").html("loading...");
    jQuery("#page-con").load(post_url);
    window.location.hash = post_id;
    return false;
});
});
</script>

再一次，它有效。无论#panel内部有什么内容以及#page-con

，它都不会下滑350px

Answer 1

一般来说，slideDown会计算元素的高度，但由于没有内容，所以在这种情况下它不能。解决方案是等到内容向下滑动元素。

高度当然必须是动态的，并且要适应内容以使其发挥作用。

jQuery(function($) {
    $("li.btn-slide a").on('click', function(e){
        e.preventDefault();

        var post_url = $(this).attr("href");
        var post_id  = $(this).attr("rel");

        $("#page-con").html("loading...")
                      .load(post_url, function() { // content loaded callback

             window.location.hash = post_id;
             $("#panel").slideDown( "slow" ); // now slide it down

        });
    });
});

.slideDown效果加载动态内容的可变高度

1 个答案: