在自定义手风琴导航上管理打开和关闭菜单

时间:2013-08-21 17:16:57

标签: jquery html css

我有一个基本的手风琴风格菜单: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/

2 个答案:

答案 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();
});

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

我在nav-open的父<li><a>本身<{1}}上设置<a>课程

同时更新了这个CSS:

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

答案 1 :(得分:0)

好吧,我想通过一系列的反复试验为你找到了它。

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

我必须相信有一种更有效的方法可以解决这个问题,但就像你一样,我的大脑现在已经被炒了!祝你好运!