Javascript 嵌套的jQuery UI不起作用

无论我点击什么，我都会得到一个折叠的菜单。顶层工作正常，正在正确折叠和打开。但子菜单根本不起作用。我不知道该怎么处理这件事。有人能帮忙吗

jquery

 $(function() {
$( "#sectionContainer, .sectionContent" ).accordion({
  header: ".section > a",
  collapsible: true,
  active: false,
});
});

HTML:

您的HTML标记中存在错误。根据,

手风琴支持任意标记，但每个内容面板必须始终是其关联标题后的下一个同级。有关如何使用自定义标记结构的信息，请参见标题选项

所以你需要确保你的手风琴头和面板是兄弟姐妹

<div id="sectionContainer">
  <a href="#"><!-- header title --></a>
  <div class="panel">
    <div class="sectionContent">
      <a href="#"><!-- header title --></a>
      <div> class="sub-panel">
      </div>
      <a href="#"><!-- header title --></a>
      <div class="sub-panel"></div>
    </div> <!-- sectionContent -->
  </div> <!-- panel -->
</div> <!-- sectionContainer -->

---

我已经建立了一个例子，现在工作

我觉得有一个比所有这些代码更简单的解决方案。谢谢你，但是你对如何让它运行有什么建议吗？函数应该做什么？

 $(function() {
 $( "#sectionContainer, .sectionContent" ).accordion({
   header: ".section > a",
   collapsible: true,
   active: false, // <---
 });
 });

 $(function() {
 $( "#sectionContainer, .sectionContent" ).accordion({
   header: ".section > a",
   collapsible: true,
   active: false
 });
 });

<div id="sectionContainer">
  <a href="#"><!-- header title --></a>
  <div class="panel">
    <div class="sectionContent">
      <a href="#"><!-- header title --></a>
      <div> class="sub-panel">
      </div>
      <a href="#"><!-- header title --></a>
      <div class="sub-panel"></div>
    </div> <!-- sectionContent -->
  </div> <!-- panel -->
</div> <!-- sectionContainer -->

$(function() {
   $("#sectionContainer, .sectionContent").accordion({
     header: " > a",
     collapsible: true,
     active: false,
   });
 });