jQuery UI 手风琴“导航：true”嵌套失败
我正在使用 jQuery UI 构建一个手风琴菜单。但在我看来， navigation: true 设置器不适用于嵌套
navigation: true 适用于 Header A ->链接 1，标题 B ->链接 2，但不适用于标头 B 下子标头中的任何内容（链接 3、链接 4）。
我是否可以知道我是否使用了不正确的结构，导致手风琴无法按预期运行？谢谢你！
这是 jQuery：
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion({
navigation: true,
active: false,
header: 'h3',
collapsible: true
});
});
</script>
这是 HTML 结构：
标题A
标头 B
<div id="accordion">
<h3>Header A</h3>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
<h3>Header B</h3>
<ul>
<li><a href="#">Link 2</a></li>
<li>
<h4>subHeader A</h4>
<ul>
<li>
<a href="#">Link 3</a>
</li>
</ul>
<h4>subHeader B</h4>
<ul>
<li>
<a href="#">Link 4</a>
</li>
</ul>
</li>
</ul>
</div>
I am building an Accordion Menu using jQuery UI. But it appears to me that the navigation: true setter does not work for a nested <ul> tag.
navigation: true works for Header A -> Link 1, Header B -> Link 2, but not for anything in subHeader under Header B (Link 3, Link 4).
May I know if I am using an incorrect structure so that the Accordion fails to function as expteced? Thank you!
Here is the jQuery:
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion({
navigation: true,
active: false,
header: 'h3',
collapsible: true
});
});
</script>
Here is the HTML structure:
Header A
- <a href="#">Link 1</a>
Header B
- <a href="#">Link 2</a>
- subHeader A
- <a href="#">Link 3</a>
subHeader B
- <a href="#">Link 4</a>
<div id="accordion">
<h3>Header A</h3>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
<h3>Header B</h3>
<ul>
<li><a href="#">Link 2</a></li>
<li>
<h4>subHeader A</h4>
<ul>
<li>
<a href="#">Link 3</a>
</li>
</ul>
<h4>subHeader B</h4>
<ul>
<li>
<a href="#">Link 4</a>
</li>
</ul>
</li>
</ul>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
也许这个问题/答案就是您正在寻找的:)
jQuery 中的嵌套手风琴菜单
Maybe this problem / answer is what you are looking for :)
Nested accordion menu in jQuery