Javascript ajax内容调用完成后自动调整div大小

我有一个api调用，可以很好地捕获数据。它的设置是使用一个按钮打开一个可折叠的div。如果您已经打开了它，在获取数据后，您将看到第一行或第二行出现，并且您必须关闭/重新打开div才能查看所有数据。我已经在这上面呆了一段时间了，已经试过很多东西了。这是JS

$(document).ready(function() {

function myFunction(val) {}
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var hidden_content = this.nextElementSibling;
        if (hidden_content.style.maxHeight) {
            hidden_content.style.maxHeight = null;
        } else {
            hidden_content.style.maxHeight = hidden_content.scrollHeight + "px";
        }
    });
}
document.getElementById('collapsible').click();
$.ajax({
    type:"GET",
    url:"pages/splunk_bf_data",
    dataType:"json",
    success:function(data){
        var html = '<p>' + data + '</p>'
        $('.data-container').html(html);
    }
})})

$（文档）.ready（函数（）{
函数myFunction（val）{}
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i'
$（'.data container'）.html（html）；
}
})})

通过“完成后”功能单击两次，对其进行调整。 如果有更好/更合法的方法，请发布。我更喜欢最佳实践

但这就是我所做的

$（文档）.ready（函数（）{

函数myFunction（val）{}
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i'+'请稍候…'+'
'
$（'.data container'）.html（html）；
},
成功：功能（数据）{
var html=''+data+'
'
$（'.data container'）.html（html）；
},
完成：功能（数据）{
changeSizeByClicking（）；
}
})})

为什么要使用

ruby

标记？这是一个来自rails应用程序的js，只是一些额外的亮点在将

async:false

添加到ajax调用中时是否有效？async:false只会使页面等待调用完成，试图使内容动态化

function myFunction(val) {}
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var hidden_content = this.nextElementSibling;
        if (hidden_content.style.maxHeight) {
            hidden_content.style.maxHeight = null;
        } else {
            hidden_content.style.maxHeight = hidden_content.scrollHeight + "px";
        }
    });
}

function changeSizeByClicking() {
    document.getElementById('collapsible2').click();
    document.getElementById('collapsible2').click();
}

document.getElementById('collapsible').click();
$.ajax({
    type:"GET",
    url:"pages/splunk_bf_data",
    dataType:"json",
    beforeSend:function(){
        var html = '<p>' + 'Fetching data from Splunk..' + '<br>' + 'please wait...'+ '</p>'
        $('.data-container').html(html);
       },
    success:function(data){
        var html = '<p>' + data + '</p>'
        $('.data-container').html(html);
    },
    complete:function(data){
        changeSizeByClicking();
    }
})})