使用 UL 的 Jquery 多级手风琴
我正在尝试使用嵌套无序列表创建多级手风琴。
我想要完成的任务:
仅显示“活动”ul(其他 保持隐藏)
当存在嵌套 ul 时 - 切换 仅嵌套 ul (2222 -> 2.1)
完整代码在这里: http://pastie.org/852421
JS
$(document).ready(function() {
$('ul.menu li ul').hide();
$('ul.menu li a').click(function(e){
$('ul.menu li a').each(function(i){
if($(this).next().is("ul") && $(this).next().is(":visible")){
$(this).next().slideUp("fast");
}
});
var e = $(e.target);
if(e.next().is("ul") && e.next().is(":visible")){
e.next().slideUp("fast");
} else {
e.next().slideDown("fast");
}
});
});
HTML
<ul class="menu">
<li><a href="#">11111</a>
<ul>
<li><a href="#" id="one">1.1</a></li>
<li><a href="#" id="one">1.2</a></li>
</ul>
</li>
<li><a href="#">22222</a>
<ul>
<li><a href="#">2.1+ (problem)</a>
<ul>
<li><a href="#">2.1.1</a></li>
<li><a href="#">2.2.2</a></li>
</ul>
</li>
<li><a href="#">2.2</a></li>
</ul>
</li>
<li><a href="#">33333</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
</li>
</ul>
I am trying to create a multilevel accordion using nested unordered list.
What I am trying to accomplish:
Show only the "active" ul (other
remain hidden)When there is a nested ul - toggle
only the nested ul (2222 -> 2.1)
Full code here: http://pastie.org/852421
JS
$(document).ready(function() {
$('ul.menu li ul').hide();
$('ul.menu li a').click(function(e){
$('ul.menu li a').each(function(i){
if($(this).next().is("ul") && $(this).next().is(":visible")){
$(this).next().slideUp("fast");
}
});
var e = $(e.target);
if(e.next().is("ul") && e.next().is(":visible")){
e.next().slideUp("fast");
} else {
e.next().slideDown("fast");
}
});
});
HTML
<ul class="menu">
<li><a href="#">11111</a>
<ul>
<li><a href="#" id="one">1.1</a></li>
<li><a href="#" id="one">1.2</a></li>
</ul>
</li>
<li><a href="#">22222</a>
<ul>
<li><a href="#">2.1+ (problem)</a>
<ul>
<li><a href="#">2.1.1</a></li>
<li><a href="#">2.2.2</a></li>
</ul>
</li>
<li><a href="#">2.2</a></li>
</ul>
</li>
<li><a href="#">33333</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
</li>
</ul>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
只需将类
.active
添加到 activeli
中,然后使用 jQuery 调用:简单;]
编辑:
另外,我以前使用过以下内容:(
rootparent
是最上面的ul
,activepage
是活动URI
)just add class
.active
to activeli
and then call with jQuery:simple ;]
Edit:
also, I previously used following:
(
rootparent
is topmostul
,activepage
is activeURI
)