メインメガメニューリンクをクリックしてサブメニュークラスを追加して削除します

Question

1メガメニューで複数レベルのドロップダウンを作成しようとしています。

最初にサブメニューリンクをクリックして "UL"をすべて展開し、 "megamenu"リンクをクリックしてから、すべてのサブメニュー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コード：

<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