jquery 菜单嵌套列表和切换功能

Question

您好，我正在尝试使用下拉菜单制作一个简单的菜单。 带有一个简单的嵌套列表。像这样：

<ul>
    <li class="niv0">
      <a href="#" class="has_ssmenu closed">Rubrique</a>
      <ul class="ssmenu">
         <li class="niv1">
         <a href="#">Sous-rubrique</a>
         </li>
      </ul>
    </li>
    <li class="niv0">
       <a href="#" class="has_ssmenu closed">Rubrique</a>
       <ul class="ssmenu">
          <li class="niv1">
              <a href="#">ssrub</a>
          </li>
       </ul>
    </li>
    <li class=" niv0">
       <a href="#">rubrique</a>
   </li>
</ul>

我想，点击“.has_ssmenu”，嵌套列表slideToggle或fade并添加一个“.open”类，当然如果已经有一个列表切换，关闭它并删除' .open' 类。

我的实际jquery代码是这样的：

       $('.ssmenu').css( 'display','none');

var open = false;
$('.has_ssmenu').toggle(
    function() {
        if (open == false){
            //if its the first time
            $(this).next().slideToggle(400);
            $(this).next().addClass("ssmenu_open");
            $(this).addClass("open");
            $(this).removeClass("closed");
            open=true;
        }
        else{
            //if there is already a list opened
            $('.ssmenu_open').slideToggle(50);
            $('.has_ssmenu').next().removeClass("ssmenu_open");
            $('.has_ssmenu').removeClass("open");
            $('.has_ssmenu').addClass("closed");
            $(this).next().slideToggle(400);
            $(this).next().addClass("ssmenu_open");
            $(this).addClass("open");
            $(this).removeClass("closed");
        }   
    },
    function() {
            $(this).removeClass("open");
            $(this).addClass("closed");
            $(this).next().removeClass("ssmenu_open");
            $(this).next().slideToggle(400);
            open=false;
    });

但它不起作用:( 我无法处理多个链接。如果我单击其他链接，如何停止切换？

其实用我的代码，第一次点击没问题，如果你选择其他链接也没问题：第一个打开的列表是关闭的。 但是，如果您再次单击现在关闭的第一个链接，我的代码错误。他没有得到公开课，他没有关闭第二个打开的列表。

也许有最简单的方法？

非常感谢您的帮助。

Answer 1

从字面上看，我只是为别人做这件事。使用它并围绕它调整您的代码：

JS Fiddle Demo

HTML：

<ul class="menuHead">
    <li class="title">Menu #1
        <ul class="menu">
            <li>Menu #1 - Link #1</li>
            <li>Menu #1 - Link #2</li>
        </ul>
    </li>
    <li class="title">Menu #2
        <ul class="menu">
            <li>Menu #2 - Link #1</li>
            <li>Menu #2 - Link #2</li>
        </ul>
    </li>
</ul>

jQuery:

$(document).ready(function () {
    $(".menuHead").on('click mouseenter mouseleave', '> li', function (evt) {
        var e = evt || window.event;
        switch (e.type || e.which) {
            case "click":
                if (!($(this).find('.menu').hasClass('stayOpen'))) {
                    $('.stayOpen').fadeOut('fast').removeClass('stayOpen');
                    $(this).find('.menu').addClass('stayOpen');
                } else {
                    $(this).find('.menu').fadeOut('fast').removeClass('stayOpen');
                }
                break;
            case "mouseenter":
                $(this).find('.menu').not('.stayOpen').fadeIn('fast').addClass('open');
                break;
            case "mouseleave":
                $(this).find('.menu').not('.stayOpen').fadeOut('fast').removeClass('open');
                break;
            default:
                break;
        }
    });
});

CSS：

.title {
    width: 150px;
    display: inline-block;
    position: relative;
}
.menu {
    width: 300px;
    top: 100%;
    position: absolute;
    display: none;
}
.open,
.stayOpen {
    display: block;
}

他从不接受作为答案，所以也许你会更好地利用它。 Here's his post

Answer 2

好的，它工作正常知道。是用这个：

$('.ssmenu').css( 'display','none');

$('.has_ssmenu').toggle(function() {
                if (!($(this).next().hasClass('ssmenu_open'))) {
                    $('.has_ssmenu').removeClass('open');
                    $('.ssmenu_open').css( 'display','none').removeClass('ssmenu_open');
                    $(this).addClass('open');
                    $(this).next().fadeIn(400).addClass('ssmenu_open');
                } else {
                    $(this).removeClass('open');
                    $(this).next().fadeOut('fast').removeClass('ssmenu_open');
                }
         },
         function(){
                if (!($(this).next().hasClass('ssmenu_open'))) {
                    $('.has_ssmenu').removeClass('open');
                    $('.ssmenu_open').css( 'display','none').removeClass('ssmenu_open');
                    $(this).addClass('open');
                    $(this).next().fadeIn(400).addClass('ssmenu_open');
                } else {
                    $(this).removeClass('open');
                    $(this).next().fadeOut('fast').removeClass('ssmenu_open');
                }

         });

对于这个 Html：

<ul>
    <li class="niv0">
      <a href="#" class="has_ssmenu">Rubrique</a>
      <ul class="ssmenu">
         <li class="niv1">
         <a href="#">Sous-rubrique</a>
         </li>
      </ul>
    </li>
    <li class="niv0">
       <a href="#" class="has_ssmenu">Rubrique</a>
       <ul class="ssmenu">
          <li class="niv1">
              <a href="#">ssrub</a>
          </li>
       </ul>
    </li>
    <li class=" niv0">
       <a href="#">rubrique</a>
   </li>
</ul>

.open 类用于添加 som css3 功能：

#menu{
    background: #FFF;
    width: 100%;
    line-height: 60px;  
    }
#menu li{
    display: inline-block;  
    }
#menu li a{
    color: #CCC;
    position: relative
    }
#menu li > a:not(:only-child):after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-color: #FFF transparent transparent;
    border-style: solid;
    border-width: 6px 5px 0 ;
    position: absolute;
    top: 5px;
    right: 10px;
}
#menu li > a.open:before{
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    z-index: 999;
    pointer-events: none;
    border-color: transparent;
    border-top-color: #FFF;
    border-width: 10px;
    left: 50%;
    top: 38px;
    margin-left: -10px;
}
.ssmenu{
    background: #4F97A7;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 0; 
}
.ssmenu a {
    color: #fff;
}