我正在尝试创建一个包含多个层级组织的导航菜单。我正在构建一个嵌套的jQuery UI手风琴,如果所有的内容都在手风琴的最低级别(最深的)嵌套中,它会非常好用。问题是有些元素将具有内容和子手风琴。如果我在顶部手风琴内放置一些文本,它看起来很棒……但是一旦我把它包裹在标签中,它就会破坏该元素中的嵌套手风琴。
运行代码时,第一部分会生成一个很好的嵌套手风琴,但第二部分呈现不正确。看起来 jQuery 开始在标题后面抓取第一个 HTML 元素来构建手风琴。
我在调用手风琴时指定了标题选项,如下所示:
这是我想要实现的效果的草图: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 元素来构建手风琴。
我在调用手风琴时指定了标题选项,如下所示:
$("div.accordian").accordion({
autoHeight: false,
collapsible: true,
active: false,
header: 'h3'
});
这已经接近所期望的效果。列表在正确的位置呈现,但第二部分中嵌套的手风琴不起作用。
我已经设置了一个Fiddle。