multi-level html menu controlled by jquery

Question

I'm facing an issue with a multi level menu. I need jQuery to show or hide the current selected submenu, and keep the others with no changes. I'm not very skillful with JQuery yet, so any help would be highly appreciated. I'm sharing here with you what I have. Thanks in advance!

I'd like to mention that I found an example on StackOverflow that is partially working. After some debugging I realized that the var mobileMenu.css returns undefined and that makes the code sometimes works.

var test1 = $('ul.hdrMenu li');

test1.on( 'click', function(e) 
{   
    var mobileMenuItem  = $(e.target).parent().find( '> ul.sub-menu' );

    if( **typeof mobileMenuItem.css('display') === "undefined"** )
    {
        mobileMenuItem  = $(e.target).parent().parent().find( '> ul.sub-menu' );          
    }

    if( mobileMenuItem.css('display') == 'none' ) 
    {
        e.preventDefault();
        mobileMenuItem.slideDown();
        e.stopPropagation();
    } 
    else if( mobileMenuItem.css('display') == 'block' ) 
    {
        e.preventDefault();
        mobileMenuItem.slideUp();
        e.stopPropagation();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hdrMenu">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Servicios</a>
    <ul class="sub-menu">
      <li><a href="#">L1</a></li>
      <li><a href="#">L2</a>
        <ul class="sub-menu">
          <li><a href="#">L2-1</a></li>
          <li><a href="#">L2-2</a></li>
        </ul>
      </li>
      <li><a href="#">L3</a></li>
      <li><a href="#">L4</a>
        <ul class="sub-menu">
          <li><a href="#">L4-1</a></li>
          <li><a href="#">L4-4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Acerca de</a>
    <ul class="sub-menu">
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub4</a></li>
    </ul>
  </li>
  <li><a href="#">Contacto</a></li>
</ul>

Answer 1

The code work just fine I think you need just to remove the parent selector .hdrNav it must be like :

var test1 = $('ul.hdrMenu li');

Or you can leave the selector as it's and add a parent div with the class hdrNav.

var test1 = $('ul.hdrMenu li');
test1.on('click', function(e) {
  var mobileMenu = $(e.target).parent().find('> ul.sub-menu');

  if (mobileMenu.css('display') == 'none') {
    e.preventDefault();
    mobileMenu.slideDown();
    e.stopPropagation();
  } else if (mobileMenu.css('display') == 'block') {
    e.preventDefault();
    mobileMenu.slideUp();
    e.stopPropagation();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="hdrMenu">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Servicios</a>
    <ul class="sub-menu">
      <li><a href="#">L1</a></li>
      <li><a href="#">L2</a>
        <ul class="sub-menu">
          <li><a href="#">L2-1</a></li>
          <li><a href="#">L2-2</a></li>
        </ul>
      </li>
      <li><a href="#">L3</a></li>
      <li><a href="#">L4</a>
        <ul class="sub-menu">
          <li><a href="#">L4-1</a></li>
          <li><a href="#">L4-4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Acerca de</a>
    <ul class="sub-menu">
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub4</a></li>
    </ul>
  </li>
  <li><a href="#">Contacto</a></li>
</ul>