Add and remove sub menu class by clicking main megamenu link

Question

i am trying to create multi level drop down with 1 mega menu.

First we clicking on sub menu link to expand all "UL" and after click on "megamenu" link.. all sub menu ul classes should be removed. so only mega menu div visible.

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

jQuery code:

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

All I did was put your jquery code in that you provided. The if statement was not in your jsfiddle link. Works now! Personally I like the hover feature better then I query my mobile nav in 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