Mobile Multi-Level Menu

navall.js

(function($) {
  
  $.fn.navall = function() {
    
    let namespace = $(this).attr('class');
    let lvl = $('.' + namespace + ' [class*="level-"]');
    
    lvl.children('.title').click(function(){
      $(this).parent().toggleClass('active');
    });
    
  };
})(jQuery);

sample.html

<ul class="nav-menu">
  
    <li class="parent level-0">
        <div class="title">LEVEL-0</div>
        <ul class="submenu">
            <li class="item">Link</li>
        </ul>
    </li>
  
    <li class="parent level-0">
        <div class="title">LEVEL-0</div>
        <ul class="submenu">
            <li class="item">Link</li>
            <li class="parent level-1">
                <div class="title">LEVEL-1</div>
                <ul class="submenu">
                    <li class="item">Link</li>
                    <li class="parent level-2">
                        <div class="title">LEVEL-2</div>
                        <ul class="submenu">
                            <li class="item">Link</li>
                            <li class="parent level-3">
                              <div class="title">LEVEL-3</div>
                              <ul class="submenu">
                                  <li class="item">Link</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
  
</ul>

script.js

jQuery(document).ready(function($) {
  $('.nav-menu').navall();
});

style.scss

.nav-menu{
  .parent{
    > .submenu{
      display: none;
    }
    &.active{
      > .submenu{
        display: block;
      }
    }
  }
}