管理自定义手风琴导航中的打开和关闭菜单 [英] Managing open and closed menus on custom accordion navigation

问题描述

我有一个基本的手风琴式菜单： http://jsfiddle.net/JqJce/1/

I have a basic accordion style menu: 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标记。

• When a link that has a submenu is clicked, its submenu slides down
• When an open submenu's link is clicked again, the menu collapses
• Only one top-level submenu should be shown at a time (showing multiple "level 2" or "level 3" menus at once is OK)
• Unopened menus should display +, open menus should display -
• I cannot change the HTML markup unfortunately

以下是我有的：

$('.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 菜单时正确关闭其他菜单并更改图标。我一直在努力这一段时间，有一种感觉，我错过了一些很简单的东西。我想我的大脑现在只是油炸了。

The code above works perfectly for opening and closing menus, but I can't seem to figure out how to properly close the other level-1 menus when a new one is opened and change the icon. I've been struggling with this for a while and have a feeling I'm missing something rather simple. I think my brain is just fried right now.

任何人都可以帮助？请让我知道我能否澄清什么。 http://jsfiddle.net/JqJce/1/

Can anyone help? Please let me know if I can clarify anything. http://jsfiddle.net/JqJce/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 < a> 的父< li> c $ c>< a> 本身

I'm setting the nav-open class on the <li> parent of the <a> vs on the <a> itself

也更新了此CSS：

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

这篇关于管理自定义手风琴导航中的打开和关闭菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！