从API取数渲染jQuery Accordion无响应问题求助

看来你碰到了动态内容加载后jQuery Accordion失效的典型问题，我帮你分析下代码里的问题，再给出修复方案：

问题出在哪？ #

• jQuery语法错误：你写的$('#jqAccordion3').html = temp是错的！jQuery的html()是方法，得用$('#jqAccordion3').html(temp)才行，这行错误代码不仅没作用，还可能干扰后续的Accordion初始化。
• Accordion初始化逻辑不对：动态替换内容后，如果之前已经初始化过Accordion，直接再调用accordion()不会触发重新渲染，得先销毁旧的实例再重建。
• 异步数据的潜在坑：如果details是从API异步拿的，得确保数据完全加载后再调用display_data，不然会出现找不到数据的情况。

修复后的完整代码 #

function display_data(name) {
  document.getElementById("data2").style.display = "block";
  
  // 先检查数据是否加载完成，避免报错
  if (!details || details.length === 0) {
    console.warn("还没拿到数据呢！");
    return;
  }

  // 过滤目标数据，加个判断避免找不到数据时报错
  let filteredData = details.filter(x => x.element_display_name === name);
  if (filteredData.length === 0) {
    console.warn(`找不到名为${name}的数据哦`);
    return;
  }
  
  let data = filteredData[0].element_items;
  var temp = "";
  
  data.forEach((u) => {
    temp += `<h2>${u.item_source_name}</h2>`;
    Object.keys(u.item_details).forEach((v) => {
      temp += '<div class="flex-container" style="padding:0 4%; margin-top:3%"><h6 class="big">' + v + '</h6>' +
              '<p>' + u.item_details[v] + '</p></div>';
    });
  });
  
  // 用正确的方式设置HTML内容（原生或jQuery选一种就行）
  $('#jqAccordion3').html(temp);
  
  // 关键：先销毁旧的Accordion，再重新初始化
  $('#jqAccordion3').accordion("destroy").accordion();
}

额外要注意的点 #

• 异步数据加载时机：如果你的details是从API获取的，一定要在请求成功后再调用display_data，比如用fetch的话：

  fetch('你的API地址')
    .then(res => res.json())
    .then(apiData => {
      // 从你提供的JSON结构里提取details
      details = apiData.tabs[0].tab_elements[0].details;
      // 现在数据准备好了，再调用display_data
      display_data("ABC");
    })
    .catch(err => console.error('API请求失败:', err));
  

• Accordion结构要规范：jQuery UI Accordion要求必须是标题标签（h1-h6）紧跟内容div，你的动态生成逻辑是符合这个要求的，这点没问题。
• 样式失效排查：如果修复后样式还是不对，检查下是不是有其他CSS覆盖了Accordion的默认样式，或者动态生成的元素类名写错了。

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