- 首页
- 其他开发
- 带有顶级手风琴内容的 Jquery UI 嵌套手风琴
带有顶级手风琴内容的 Jquery UI 嵌套手风琴
[英] Jquery UI Nested Accordion with Content in top level Accordion
本文介绍了带有顶级手风琴内容的 Jquery UI 嵌套手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个包含多个组织级别的导航菜单.我正在构建一个嵌套的 jQuery UI 手风琴，如果我的所有内容都在手风琴的最低级别(最深)嵌套中，则效果很好.问题是某些元素将具有内容和子手风琴.如果我在顶部手风琴旁边放置一些文本，它看起来很棒......但是一旦我将它包裹在标签中，它就会破坏该元素中嵌套的手风琴
这是我试图让它看起来像的模型照片样机
我当前的 HTML
<h3><a href="#">一个</a></h3><div class="accordian">我真的很想要这里的清单！<h3><a class=href="#">A</a></h3><div><ul><li>列表</li><li>列表</li><li>列表</li>
<h3><a href="#">B</a></h3><div><ul><li>列表</li><li>列表</li><li>列表</li>
<h3><a href="#">两个</a></h3><div class="accordian"><ul><li>但是他们</li><li>不要</li><li>工作</li><h3><a href="#">A2</a></h3><div><ul><li>列表</li><li>列表</li><li>列表</li>
<h3><a href="#">B2</a></h3><div><ul><li>列表</li><li>列表</li><li>列表</li>
查询
$("div.accordian").accordion({自动高度:假，可折叠:真实，活动:假});
像这样运行代码会为第一部分生成一个很好的嵌套手风琴，但第二部分渲染不正确.看起来 jQuery 开始抓取标题后面的第一个 html 元素来构建手风琴.
我在调用accordian时指定了header选项，如下
$("div.accordian").accordion({自动高度:假，可折叠:真实，活动:假，标题:'h3'});
这接近于想要的效果.该列表呈现在正确的位置，但第二部分中的嵌套手风琴不起作用.
我有一个 Fiddle 设置
解决方案
这应该可行
<h3><a href="#">一个</a></h3><div class="accordian">我真的很想要这里的清单！<h3><a class=href="#">A</a></h3><div><ul><li>列表</li><li>列表</li><li>列表</li>
<h3><a href="#">B</a></h3><div><ul><li>列表</li><li>列表</li><li>列表</li>
<h3><a href="#">两个</a></h3><div><-- 一个包装器--><ul><li>但是他们</li><li>不要</li><li>工作</li><div class="accordian"><h3><a href="#">A2</a></h3><div><ul><li>列表</li><li>列表</li><li>列表</li>
<h3><a href="#">B2</a></h3><div><ul><li>列表</li><li>列表</li><li>列表</li>
演示:小提琴
对于标签 Two，您需要创建另一个包装元素并将 ul 和子 accordion 作为其子元素
I'm trying to create a navigation menu that contains multiple level of organization. I'm building a nested jQuery UI Accordion that works great if all my content in the lowest level (deepest) nest of the accordion. The problem is that some elements will have content and a sub accordion. If I place some text in side the top accordion it looks great...but as soon as I wrap it in tags it breaks the nested accordion in that element
Here is a mockup of what I'm trying to get it to look like
Photo Mockup
My current 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
});
Running the code like this generates a good nested accordion for the first section but the second section renders incorrectly. It looks like jQuery starts grabbing the fist html element after the header to build the accordion.
I have specified the header option when calling accordian as follows
$("div.accordian").accordion({
autoHeight: false,
collapsible: true,
active: false,
header: 'h3'
});
This gets close to the desired effect. The list renders in the correct place but the nested accordion in the second section is non functional.
I have a Fiddle set up
解决方案
This should work
<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>
Demo: Fiddle
For the tab Two you need to create another wrapper element and place the ul and child accordion as its children
这篇关于带有顶级手风琴内容的 Jquery UI 嵌套手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
