我正在尝试创建一个包含多个组织级别的导航菜单.我正在构建一个嵌套的jQuery UI Accordion,如果所有我的内容都在手风琴的最低级别(最深)嵌套中,那么它很有效.问题是有些元素会有内容和副手风琴.如果我在顶部手风琴旁放置一些文字,它看起来很棒……但是一旦我将它包裹在标签中,它就会打破该元素中的嵌套手风琴
这是我试图让它看起来像的样机
Photo Mockup
我目前的HTML
<div id="faqs-container" class="accordian">
<h3><a href="#">One</a></h3>
<div class="accordian">
I really want a list here!
<h3><a class=href="#">A</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<h3><a href="#">B</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
<h3><a href="#">Two</a></h3>
<div class="accordian">
<ul>
<li>But They</li>
<li>Do Not</li>
<li>Work</li>
</ul>
<h3><a href="#">A2</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<h3><a href="#">B2</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
</div>
jQuery的
$("div.accordian").accordion({
autoHeight: false,collapsible: true,active: false
});
像这样运行代码会为第一部分生成一个好的嵌套手风琴,但第二部分渲染不正确.看起来jQuery开始在标头之后抓住第一个html元素来构建手风琴.
我在调用accordian时指定了header选项,如下所示
$("div.accordian").accordion({
autoHeight: false,active: false,header: 'h3'
});
这接近期望的效果.列表呈现在正确的位置,但第二部分中的嵌套手风琴不起作用.
我有Fiddle设置
解决方法
这应该工作
<div id="faqs-container" class="accordian">
<h3><a href="#">One</a></h3>
<div class="accordian">
I really want a list here!
<h3><a class=href="#">A</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<h3><a href="#">B</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
<h3><a href="#">Two</a></h3>
<div> <-- A Wrapper -->
<ul>
<li>But They</li>
<li>Do Not</li>
<li>Work</li>
</ul>
<div class="accordian">
<h3><a href="#">A2</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<h3><a href="#">B2</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
</div>
</div>
演示：Fiddle
对于选项卡二,您需要创建另一个包装元素并将ul和子手风琴放置为其子元素
