jquery - 在自定义 Accordion 导航上管理打开和关闭的菜单

Question

我有一个基本的 Accordion 风格菜单: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;
}

这是我想要发生的事情:

• 当点击带有子菜单的链接时，其子菜单会向下滑动
• 再次单击打开的子菜单的链接时，菜单会折叠
• 一次只能显示一个顶级子菜单(一次显示多个“2 级”或“3 级”菜单即可)
• 未打开的菜单应显示+，打开的菜单应显示-
• 很遗憾，我无法更改 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();

});

上面的代码非常适合打开和关闭菜单，但我似乎无法弄清楚如何在打开新菜单并更改图标时正确关闭其他 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> 的父级对比 <a>本身

还更新了这个 CSS:

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