javascript - ajax加载后jQuery可以重置父高度吗？

Question

尝试重置父容器的高度时，回调函数的运气不太好。

事件:

1. 用户点击.boxyComments a
2. .showComments 接受load 并引入内容。 relative css 属性改变了它的高度
3. .boxy 随其内部元素 .articleImageThumb、.initialPostLoad 的添加高度值和 的更改高度值调整大小.showComments

第 3 步不是调整大小。用 (window).load 包裹仍然不会改变 height 值，直到整个函数完成后，导致父 的高度没有改变>.boxy.

如此 令人沮丧....

示例如下:

$(".boxyComments a").click(function (event) {

        var postHeight = $(this).closest('.boxy').find('.articleImageThumb').height();
        var excHeight = $(this).closest('.boxy').find('.initialPostLoad').height();
        var bComments = $(this).closest(".showComments").height();

        event.preventDefault();
        var post_id = $(this).attr("rel");
        $.ajaxSetup({cache:false});
        $(this).closest(".boxyComments").find(".showComments")
        .load("<?php echo get_site_url(); ?>/ajax-fold/",{id: post_id}, function() {
            console.log(excHeight)
            $(document).ready().closest('.boxy').animate({height:  postHeight + excHeight}, 500);
        });
});

半伪输出:

<div class="boxy">

<div class="articleImageThumb">
<a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID, "url", true);
    else the_permalink(); ?>" rel="<?php the_ID(); ?>">
    <?php echo get_the_post_thumbnail($page->ID, 'original'); ?>
</a>
</div>

<div class="boxyComments">
<a href="<?php if(get_post_meta($post->ID, "url", true)) echo get_post_meta($post->ID, "url", true); else the_permalink(); ?>" rel="<?php the_ID(); ?>" >Open Comments</a>
<div class="showComments"></div>
</div>

</div>

console.log 输出仅在 load() 完成之前提供 height() 值。

有没有办法在加载后重置它？

Answer 1

为什么不直接调用:

 excHeight = $(document).ready().closest('.boxy').find('.showComments').height();

加载/加载完成后，您将得到如下内容:

.load("<?php echo get_site_url(); ?>/ajax-fold/",{id: post_id}, function() {
        excHeight =  $(document).ready().closest('.boxy').find('.showComments').height();
        console.log(excHeight)
        $(document).ready().closest('.boxy').animate({height:  postHeight + excHeight}, 500);
    });