顶级Accordion中的Jquery UI嵌套手风琴内容

我正在尝试创建一个包含多个组织级别的导航菜单。 我正在构建一个嵌套的jQuery UI Accordion，如果所有内容都在手风琴的最低级别（最深）嵌套中，那么它非常有用。 问题是某些元素会有内容和副手风琴。 如果我在顶部手风琴的旁边放置一些文字，它看起来很棒……但是一旦我将它包裹在标签中，它就会破坏该元素中的嵌套手风琴

这是我试图让它看起来像Photo Mockup的模型

我目前的HTML

 
One
 
 I really want a list here! 
A
 
 
 
list
 
list
 
list
 
 
 
B
 
 
 
list
 
list
 
list
 
 
 
 
Two
 
 
 
But They
 
Do Not
 
Work
 
 
A2
 
 
 
list
 
list
 
list
 
 
 
B2
 
 
 
list
 
list
 
list
 
 
 
  

jQuery的

  $("div.accordian").accordion({ autoHeight: false, collapsible: true, active: false }); 

像这样运行代码会为第一部分生成一个好的嵌套手风琴，但第二部分渲染不正确。 看起来jQuery开始在标头之后抓住第一个html元素来构建手风琴。

我在调用accordian时指定了header选项，如下所示

 $("div.accordian").accordion({ autoHeight: false, collapsible: true, active: false, header: 'h3' }); 

这接近期望的效果。 列表呈现在正确的位置，但第二部分中的嵌套手风琴不起作用。

我有一个小提琴设置

Answer 1

这应该工作

 
 
One
 
 I really want a list here! 
A
 
 
 
list
 
list
 
list
 
 
 
B
 
 
 
list
 
list
 
list
 
 
 
 
Two
 
 <-- A Wrapper --> 
 
But They
 
Do Not
 
Work
 
 
 
A2
 
 
 
list
 
list
 
list
 
 
 
B2
 
 
 
list
 
list
 
list
 
 
 
 
  

演示： 小提琴

对于选项卡Two您需要创建另一个包装元素并将ul和子accordion放置为其子元素

Answer 2

看看这个小提琴

你是正确的，它会查看标题后面的下一个元素，因此你可以用div来简单地包装顶级手风琴的内容，然后包括你的副手风琴。

 
Two
 
  
 
But They
 
Do Not
 
Work
 
 
 
A2
 
 
 
list
 
list
 
list
 
 
 
B2
 
 
 
list
 
list
 
list