Jquery 通过单击主菜单链接添加和删除子菜单类

我试图创建一个大型菜单的多层次下拉列表

首先，我们点击子菜单链接展开所有“UL”，然后点击“megamenu”链接。。应删除所有子菜单ul类。因此，只有mega菜单div可见

jsfiddle

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:

HTML代码：

<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>

大量链接

大量链接

大量链接

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

---

谢谢你的回答。。但当用户单击“确定”任何身体区域时，我们需要执行相同的事件。。您可以检查代码..并单击主体区域所有子“UL”类都已删除（.onclickopen、.onclickopen02、onclickopen03）。。当用户点击“超级菜单”链接时，我想做同样的事情。对不起，我没有得到你们想要的。你想为你的“大菜单”制作更多的子菜单吗？您想让菜单在单击关闭时消失吗？megamenu中没有子菜单下拉链接中只有3个子菜单简要说明您想要什么当我单击mega menu时，它在JSFIDLE中消失，在您的版本中不是吗？

<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>

$('.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