Добавить и удалить класс подменю, нажав на главную ссылку megamenu

Question

Я пытаюсь создать многоуровневое раскрытие с 1 мега-меню.

Сначала мы нажимаем на ссылку подменю, чтобы развернуть все «UL» и после щелчка по ссылке «megamenu» .. все подменю ul классы должны быть удалены. поэтому отображается только мега-меню.

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 код:

<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. Работает сейчас! Лично мне нравится функция наведения лучше, чем я запрашиваю мой мобильный nav в 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