加载PHP数据时jQuery animate需点击两次才触发的问题求助

问题根因 #

你遇到的点击两次才触发动画的问题确实和异步加载逻辑有关。jQuery的load()方法是异步执行的，原有代码中触发load请求后立刻执行高度计算逻辑，此时PHP返回的内容还没渲染到页面中，容器高度计算得到的是空内容的高度，导致第一次点击动画没有实际展开效果，第二次点击时内容已经加载完成，高度计算正常，所以能正常展开。

解决方案 #

将展开逻辑放到load()的回调函数中，等待数据加载并渲染完成后再执行高度计算和动画即可，修改后的完整代码如下：

$(document).ready(function(){
    $(".orderBlok").click(function(){
        // 可选优化：防止加载中重复点击触发多次请求
        if($(this).data('loading')) return;

        var order = $(this).find('.orderBlokNummer').text();
        var dat = $('#datumSelector').val();
        var open = $(this).find('.orderBlokBonGedeelte'),
            animateTime = 500;

        // 收起逻辑不需要等待异步加载，直接执行
        if(open.height() != 0){
            open.stop().animate({ height: '0' }, animateTime);
            return;
        }

        // 展开逻辑：加载完成后再执行高度计算和动画
        $(this).data('loading', true);
        $('#orderSelector').val(order);
        $("#" + order).load("bonselect.php", {
            dezeOrder: order,
            datumVandaag: dat
        }, function(){
            // 回调函数：服务端返回内容渲染完成后才触发动画
            autoHeightAnimate(open, animateTime);
            $(this).data('loading', false);
        });
    });

    function autoHeightAnimate(element, time){
        var curHeight = element.height(), // 获取当前高度
            autoHeight = element.css('height', 'auto').height(); // 计算内容撑开的自适应高度
        element.height(curHeight); // 重置回当前高度
        element.stop().animate({ height: autoHeight }, time); // 动画过渡到自适应高度
    }
});

原有autoHeightAnimate函数逻辑无需修改，可以正常使用。

内容的提问来源于stack exchange，提问作者ronald1993