Javascript 基于Ajax的显示不准确

我正在构建一个使用jQuery的slideDown和ajax的Joomla模块

它的工作方式是填充slideDown div，计算具有最高高度的div子元素，并调整包含的div高度以供显示

问题是，如果页面未被缓存（即，如果页面第一次加载），则高度不会正确显示，如下所示

但在第二次单击等操作时，它会正确显示如下

我认为这是因为在计算高度之前，div子元素的内容没有完全填充，因此生成了一个虚假的高度。我尝试了一些方法来确保不会发生这种情况——现在我正在使用回调函数和填充div标记的函数

非常感谢您的快速帮助，谢谢

编辑-下面是填充的代码

menuItemAjax: function (urlContent, dataContent) {
    jQuery.ajax({
        type: "POST",
        url: urlContent,
        data: dataContent, // data to send along with url
        complete: function () {
            //console.log("Process completed");
        },
        success: function (returnedData) {
            WetvCreateHtml.popDropDownDiv(returnedData, function() {

                var ddChildren = dropdownDiv.children(), highestHeight = 0;
                ddChildren.each(function(){
                    if (jQuery(this).height() > highestHeight) {
                        highestHeight = jQuery(this).height();
                    }
                });
                dropdownDiv.animate({ height: highestHeight });

            });

        },
        error: function () {
            //console.log("Error occured");
        },
        statusCode: {
            404: function() {
                //console.log("Page not found");
            }
        }
    });
},

popDropDownDiv: function(returnedData, callback) {
    dropdownDiv.html(returnedData);

    if (typeof(callback) == "function") {
        callback();
    }
}

---

您可能希望显示一些基本代码。添加了负责更改的代码。子项是否可见并添加到文档中？是的，在第一页加载时，具有最高高度的子项的高度值正确，但包含div的高度值不正确。