如何修复jQuery UI Accordion动态新增面板失效问题？有无官方方法？

嘿，这个问题我之前也踩过坑！jQuery UI的Accordion组件在初始化时，只会对当时已存在的DOM元素绑定折叠交互逻辑。你动态添加新的<h3>和<div>后，这些新元素并没有被Accordion组件识别，所以才会出现无法折叠的情况。

官方解决方案：使用refresh方法 #

jQuery UI Accordion提供了官方的refresh方法，专门用来处理动态添加/移除面板后的组件更新。这个方法会重新扫描Accordion容器内的元素，把新的面板纳入组件管理，同时保留原有的展开/折叠状态。

修改后的完整代码 #

下面是修复后的代码，重点是在添加新元素后调用accordion("refresh")，同时还修正了CSS里的小错误：

$( function() {
  // 初始化Accordion，用变量缓存起来方便后续调用
  const $accordion = $( "#accordion" ).accordion();
  
  $('#addNewSection').on('click', function() {
    // 计算新面板的序号（用jQuery选择器更准确）
    const panelCount = $accordion.find('h3').length + 1;
    
    // 创建新的面板标题和内容（用jQuery写更简洁，原生DOM写法也可以保留）
    const $newH3 = $('<h3>').text(`Section ${panelCount} (Now collapsible!)`);
    const $newDiv = $('<div>').text('This is a new section after clicking the button');
    
    // 把新元素添加到Accordion容器
    $accordion.append($newH3).append($newDiv);
    
    // 关键步骤：通知Accordion刷新，识别新添加的面板
    $accordion.accordion("refresh");
  });
} );

/* 注意：原CSS里的background-color值不要加引号，否则样式不会生效 */
h3 { 
  background-color: blue; 
  color: white;
  padding: 8px;
  margin: 0;
}
div { 
  background-color: lightgreen; 
  padding: 10px;
}

<div id="accordion">
  <h3>Section 1 (collapsible)</h3>
  <div>
    <p> This is the context in section 1 </p>
  </div>
  <h3>Section 2 (collapsible)</h3>
  <div>
    <p> This is the context in section 2 </p>
  </div>
</div>
<button id="addNewSection">AddOne</button>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

额外说明 #

1. 关于原生DOM写法：如果你习惯用原生JS创建元素，完全可以保留你原来的写法，只要在appendChild之后调用$( "#accordion" ).accordion("refresh")就可以解决问题。
2. CSS的小错误：你原代码里的background-color: "blue";是无效的，CSS属性值不需要加引号，去掉引号后背景色才会正常显示。
3. 官方API细节：refresh方法是jQuery UI Accordion官方支持的功能，它会自动扫描容器内的<h3>+<div>配对结构，为新面板绑定折叠事件，同时不会影响原有面板的状态。

这样修改后，你点击按钮新增的面板就可以正常折叠啦！

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