1

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

4

2 回答 2

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/

我在自身的vs的父nav-open级上设置类<li><a><a>

还更新了这个 CSS：

.nav-open > a:after {
    content:' - ';
}
于 2013-08-21T17:46:04.967 回答
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');
});

我必须相信有一种更有效的方法来处理这个问题，但和你一样，我的大脑现在已经炸了！祝你好运！

于 2013-08-21T18:08:20.553 回答