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或淡入淡出并添加一个“.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;
}

jquery菜单嵌套列表＆amp;切换功能

2 个答案:

JS Fiddle Demo

HTML：

jQuery的：

CSS：