Открыть верхний уровень в меню уровня 2 - Woocommerce

Question

Я хочу создать аккордеонное меню для мобильных устройств в WordPress Woocommerce.Я пытался использовать некоторые коды в других вопросах, но не смог этого сделать ..

Мой код может обрабатывать только 2 уровня ... Как я могу позволить верхним уровням оставаться открытыми, когда я нажимаюУровень 2 этой иерархии меню?

Спасибо!

jQuery('.menu li.menu-item-has-children ').prepend('<span class="span-plus-mobile"><i class="iplus-mobile fa fa-angle-left"></i></span>')

jQuery('.span-plus-mobile').parent().click(function() {
  jQuery(this).children('.sub-menu').slideToggle(200);
});


jQuery(".span-plus-mobile").click(function() {
	jQuery("i", this).toggleClass("fa-angle-left fa-angle-down");
});

  .menu .sub-menu {
    display: none;
  }

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

Answer 1

Рабочая демонстрация: https://codepen.io/creativedev/pen/OEmMaL

Изменен код js для класса на ul li.

jQuery('.menu li.menu-item-has-children ').prepend('<span class="span-plus-mobile"><i class="iplus-mobile fa fa-angle-left"></i></span>')

$('li').on('click', function(e) {
  $(this).children('ul').toggle();
  $(this).siblings('li').find('ul').hide();
  e.stopPropagation();
});

jQuery(".span-plus-mobile").click(function() {
    jQuery("i", this).toggleClass("fa-angle-left fa-angle-down");
});