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();
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulid="menu-main-menu"><liclass="menu-item-has-children"><a>parent link</a><ulclass="sub-menu"><li><ahref="#">child link</a></li><li><ahref="#">child link</a></li></ul></li><liclass="menu-item-has-children"><a>parent link</a><ulclass="sub-menu"><li><ahref="#">child link</a></li><li><ahref="#">child link</a></li></ul></li></ul>