jQuery accordion动态加载API内容后高度无法自适应如何解决

修复方案 #

1. 删除冲突配置 #

你当前配置中同时开启了fillSpace: true，该属性优先级高于heightStyle: "content"，会强制手风琴高度适配父容器，是自适应失效的核心原因，直接删除该配置项即可。

2. 显式指定标题选择器 #

jQuery UI Accordion默认要求结构为「标题元素+内容元素」交替排列，你动态生成的标题是button.accordion，需要在初始化时显式指定标题选择器，避免结构识别错误导致高度计算异常：

$("#job_accordion").accordion({
    event: 'click',
    collapsible: true,
    active: false,
    clearStyle: true,
    heightStyle: "content",
    animate: 200,
    icons: false,
    header: ".accordion" // 新增：匹配你生成的标题类名
})

3. 修正无效绑定与样式 #

• 你原代码中.children('li').on('mouseenter'...)为无效绑定，你生成的结构中没有li作为accordion直接子元素，可直接删除该逻辑，如需hover触发展开可以替换为以下代码：

.on('mouseenter', '.accordion', function () {
    $(this).trigger('click');
});

• CSS中你写的#job_accordion .ui-accordion-header a选择器不匹配生成的结构（你的标题是button无嵌套a标签），同时给内容区加溢出控制即可：

#job_accordion .ui-accordion-header {
    color: #fff;
    line-height: 42px;
    font-size: 12pt;
    text-indent: 10px;
    margin: 0;
}
#job_accordion .ui-accordion-content {
    border: 0;
    color: #fff;
    background: #000;
    border-top: 0;
    overflow: hidden;
}

内容的提问来源于stack exchange，提问作者M.Izzat