Question

我正在尝试用1兆菜单创建多级下拉菜单。

首先，我们点击子菜单链接以展开所有＆＃34; UL＆＃34;然后点击＆＃34; megamenu＆＃34;链接..应删除所有子菜单ul类。所以只有超级菜单div可见。

的jsfiddle https://jsfiddle.net/8mztfvgp/1/

jQuery代码：

$('.mynavul > li > a').on('click', function(){
    if(!$(this).parents().hasClass('onclickopen')){
        $('.mynavul > li').removeClass('onclickopen');    
    }
    $(this).parent().toggleClass('onclickopen');
    });

    $('.mynavul01 > li > a').on('click', function(){
    $(this).parent().toggleClass('onclickopen02');
    });

    $('.mynavul02 > li > a').on('click', function(){
    $(this).parent().toggleClass('onclickopen03');
    });

    $("body").click(function () {
        $(".mynavul > li").removeClass('onclickopen');
        $(".mynavul01 > li").removeClass('onclickopen02');
        $(".mynavul02 > li").removeClass('onclickopen03');
    });

    $(".mynavul > li > a, .mynavul01 > li > a, .mynavul02 > li > a, .mynavul03 > li > a").click(function(e){
    e.stopPropagation();
    });

CSS：

body {margin: 0px;padding: 0px; min-height:1024px;}
.mynav .mynavul > li { float:left; margin:0px 35px; list-style:none; }
.mynavul01{min-width:150px;  position:absolute; top:48px; display:none; }
.mynavul02{min-width:150px;  position:absolute; top:100%; left:100%; display:none;  }
.mynavul03{min-width:150px;  position:absolute; top:100%; left:100%;  display:none;}
.onclickopen .mynavul01{ display:block;}
.onclickopen02 .mynavul02{ display:block;}
.onclickopen03 .mynavul03{ display:block;}
.bigmenu{width:100%;  position:absolute; top:48px; left:0px; display:none; border:solid 1px #ccc;   }
.onclickopen .bigmenu{display:block;}

HTML code：

<nav class="mynav clearfix">
  <ul class="mynavul">
    <li><a href="#">Dropdown</a>
      <ul class="mynavul01">
        <li><a href="#">Submenu item 1 </a></li>
        <li><a href="#">Submenu item 2</a></li>
        <li><a href="#">Submenu item 3</a></li>
        <li><a href="#">Submenu item 4 »</a>
          <ul class="mynavul02">
            <li><a href="#">Submenu item 1</a></li>
            <li><a href="#">Submenu item 2</a></li>
            <li><a href="#">Submenu item 3</a></li>
            <li><a href="#">Submenu item 4  »</a>
              <ul class="mynavul03">
                <li class=""><a href="#">Submenu item 1</a></li>
                <li class=""><a href="#">Submenu item 2</a></li>
                <li class=""><a href="#">Submenu item 3</a></li>
                <li class=""><a href="#">Submenu item 4</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Mega menu</a>
      <div class="bigmenu clearfix"> Lot of links<br>
        Lot of links<br>
        Lot of links<br>
      </div>
    </li>
  </ul>
</nav>

Answer 1

我所做的只是将你的jquery代码放在你提供的代码中。 if语句不在你的jsfiddle链接中。现在就行！我个人更喜欢悬停功能，然后在css中查询我的移动导航。

https://jsfiddle.net/8mztfvgp/2/

$('.mynavul > li > a').on('click', function(){
if(!$(this).parents().hasClass('onclickopen')){
    $('.mynavul > li').removeClass('onclickopen');    
}
$(this).parent().toggleClass('onclickopen');
});

$('.mynavul01 > li > a').on('click', function(){
$(this).parent().toggleClass('onclickopen02');
});

$('.mynavul02 > li > a').on('click', function(){
$(this).parent().toggleClass('onclickopen03');
});

$("body").click(function () {
    $(".mynavul > li").removeClass('onclickopen');
    $(".mynavul01 > li").removeClass('onclickopen02');
    $(".mynavul02 > li").removeClass('onclickopen03');
});

$(".mynavul > li > a, .mynavul01 > li > a, .mynavul02 > li > a, .mynavul03 > li > a").click(function(e){
e.stopPropagation();
});
//this works fine for what you want

单击main megamenu链接添加和删除子菜单类

1 个答案: