Slide Toggle Other Submenus When A Submenu Opens

Hello I have a mobile menu with sub-menus. I have it set up and working properly but I would like to add another feature. I want it so when a sub-menu is open, and a user clicks to

Solution 1:

Get .sub-menu within the sibling of parent .menu-item-has-children element and then slide it up.

jQuery(this)
     // get the parent li
     .closest('.menu-item-has-children')
     // get it's siblings
     .siblings()
     // get elements to hide
     .find('.sub-menu')
     // apply slide up animation
     .slideUp();

jQuery("#mobile-nav-icon").click(function() {
  jQuery('#menu-main-menu').slideToggle();
});

jQuery('#menu-main-menu > .menu-item-has-children > .sub-menu').addClass('first-sub');

jQuery('#menu-main-menu > .menu-item-has-children a').click(function() {
  jQuery(this).siblings('.first-sub').slideToggle();
  jQuery(this).closest('.menu-item-has-children').siblings().find('.sub-menu').slideUp();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-menu">
  <li class="menu-item-has-children"><a>parent link</a>
    <ul class="sub-menu">
      <li><a href="#">child link</a>
      </li>
      <li><a href="#">child link</a>
      </li>
    </ul>
  </li>

  <li class="menu-item-has-children"><a>parent link</a>
    <ul class="sub-menu">
      <li><a href="#">child link</a>
      </li>
      <li><a href="#">child link</a>
      </li>
    </ul>
  </li>
</ul>