定制手风琴导航管理开放式和封闭式菜单

Question

我有一个基本的手风琴式菜单：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; 
} 

这是我希望发生的事情：

• 当一个链接有一个子菜单被点击，其子菜单向下滑动
• 当打开子菜单的链接再次点击时，我NU折叠
• 只有一个顶级子菜单应该在时间显示（显示多个“等级2”或“3级”菜单一次是OK）
• 未开封的菜单应显示+，打开菜单应显示-
• 我不能改变的HTML标记不幸

下面是我得到了什么：

$('.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(); 

}); 

上面的代码完全适用于开放和CL菜单，但我似乎无法弄清楚如何正确关闭其他level-1菜单，当一个新的打开并更改图标。我一直在苦苦挣扎，有一种感觉我错过了一些很简单的事情。我认为我的大脑现在正在被炒。

任何人都可以帮忙吗？请让我知道我是否可以澄清任何事情。 http://jsfiddle.net/JqJce/1/

Answer 1

这里有一个办法：

$('.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(); 
}); 

http://jsfiddle.net/JqJce/6/

我设置nav-open类的<li>父<a>的VS上<a>本身

也更新了这个CSS：

.nav-open > a:after { 
    content:' - '; 
} 

Answer 2

好吧，我想我是通过一系列试验和错误为你解决的。

http://jsfiddle.net/JqJce/7/

$('.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'); 
}); 

我不得不相信有来处理这更有效的方式，但像你，我的脑子现在炒！祝你好运！