我有一个基本的手风琴风格菜单:http://jsfiddle.net/JqJce/1/
<ul class="nav level-1">
<li><a href="#">Link</a></li>
<li class="has-submenu"><a href="#">Link</a>
<ul class="level-2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul></li>
<li class="has-submenu"><a href="#">Link</a>
<ul class="level-2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="has-submenu"><a href="#">Link</a>
<ul class="level-3">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul></li>
</ul></li>
<li class="has-submenu"><a href="#">Link</a>
<ul class="level-2">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul></li>
</ul>
a {
display:block;
background:#aaa;
border:1px solid #ccc;
padding:5px;
color:#fff;
}
li li {
display:none;
}
/* Open/Closed indicators */
.has-submenu > a:after {
content:' + ';
}
.has-submenu .nav-open:after {
content:' - ';
}
li li a {
padding-left:40px;
background:#888;
}
li li li a {
padding-left:80px;
background:#333;
}
这就是我想要发生的事情:
+
,打开的菜单应显示-
这就是我所拥有的:
$('.has-submenu > a').on('click', function(e){
e.preventDefault();
// Need to add/remove .nav-open from links
// $('a').removeClass('nav-open');
$(this).toggleClass('nav-open');
// Not sure what I'm thinking here...
// $('.level-1 > .has-submenu').not($(this).parent()).find('li').slideUp();
// Sort of works, but clicking an open menu makes it close and open again
// $('.level-2 > li').not($(this).parent()).slideUp();
$(this).next('ul').find('> li').slideToggle();
});
上面的代码非常适合打开和关闭菜单,但我似乎无法弄清楚如何在打开新菜单时正确关闭其他level-1
菜单并更改图标。我一直在努力解决这个问题并且有一种感觉我错过了一些相当简单的东西。我认为我的大脑现在只是炒了。
有人可以帮忙吗?如果我能澄清任何事情,请告诉我。 http://jsfiddle.net/JqJce/1/
答案 0 :(得分:2)
这是一种方式:
$('.has-submenu > a').on('click', function (e) {
e.preventDefault();
// slide up currently open except if click
// occurs within an already open menu
if ($(this).closest('.nav-open').length === 0)
{
$('.nav > .nav-open').removeClass('nav-open').find('> ul > li').slideUp();
}
// give the <li> the "nav-open" class, then slide the <li> grandchildren
$(this).parent().toggleClass('nav-open').find('> ul > li').slideToggle();
});
我在nav-open
的父<li>
与<a>
本身<{1}}上设置<a>
课程
同时更新了这个CSS:
.nav-open > a:after {
content:' - ';
}
答案 1 :(得分:0)
好吧,我想通过一系列的反复试验为你找到了它。
$('.has-submenu > a').on('click', function(e){
e.preventDefault();
$(this).next('ul').find('> li').slideToggle();
// If it's a level one link & there's other open links...
if($(this).parent("li").parent("ul").hasClass("level-1") && $(".level-1 > li > a").hasClass("nav-open")) {
//... collapse the top level open link.
$(".level-1 > li > a.nav-open").next('ul').find('> ').slideToggle();
$(".level-1 > li > a.nav-open").removeClass("nav-open");
}
$(this).toggleClass('nav-open');
});
我必须相信有一种更有效的方法可以解决这个问题,但就像你一样,我的大脑现在已经被炒了!祝你好运!