Как переключить нажатую ссылку меню и отключить все переключенные ссылки

Question

Мой веб-сайт поставляется с этим javascript для переключения подменю, которое работает, однако, когда я нажимаю новую ссылку меню, остальные переключаемые ссылки не закрываются, поэтому все они остаются открытыми.

Как чтобы переключить только нажатую ссылку и отключить или удалить все "открытые" ссылки? Если у вас новый формат javascript, это тоже хорошо.

jQuery (function ($) {

$('li.has-submenu span.icon-caret').click(function(e){
    var $me = $(this);
    if($me.siblings('.wsite-menu-wrap').hasClass('open')) {
        $me.siblings('.wsite-menu-wrap').toggleClass('open');
    } else {
        $me.siblings('.wsite-menu-wrap').addClass('open');
    }
});

});

HTML:

<div id="navMobile" class="nav mobile-nav">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Style</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>

<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Life</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>

<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Work</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>

</ul>
</div>

Answer 1

Сначала удалите открытый класс из каждого элемента: $('.open').removeClass('open');

Answer 2

Мне удалось взломать код ...

$('li.has-submenu span.icon-caret').on('click', function(e) {
event.preventDefault();
    var $me = $(this);
    if ($me.parent().hasClass('open')) {
      $me.parent().removeClass('open');
      $me.find('.open').removeClass('open');
    }
    else {
      $('.open').removeClass('open');
      $me.parents('.has-submenu').children('.wsite-menu-wrap').addClass('open');
    }
});

Answer 3

Сначала я бы удалил display: none, если у вас нет анимации с jQuery в меню. Кроме того, я не знаю вашего CSS, но вы можете попробовать его, как в следующем примере

$(document).ready(function() {

  $('#navMobile .wsite-menu-item').on('click', toggleMenuLink);

  function toggleMenuLink(event) {
    var target = $(event.target).parent();

    event.preventDefault();
    target.siblings().removeClass('open');

    if (target.hasClass('has-submenu')) {
      target.toggleClass('open');
    }
  }

});

#navMobile .has-submenu > .wsite-menu-wrap,
#navMobile .has-submenu > .wsite-menu {
  display: none;
}

#navMobile .has-submenu.open > .wsite-menu-wrap,
#navMobile .has-submenu.open > .wsite-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="navMobile" class="nav mobile-nav">
  <ul class="wsite-menu-default">
    <li class="wsite-menu-item-wrap has-submenu">
      <a class="wsite-menu-item">Style</a>
      <span class="icon-caret"></span>
      <div class="wsite-menu-wrap">
        <ul class="wsite-menu">
          <li class="wsite-menu-item-wrap">
            <a class="wsite-menu-item">New 1</a>
            <span class="icon-caret"></span>
          </li>
        </ul>
      </div>
    </li>

    <li class="wsite-menu-item-wrap has-submenu">
      <a class="wsite-menu-item">Life</a>
      <span class="icon-caret"></span>
      <div class="wsite-menu-wrap">
        <ul class="wsite-menu">
          <li class="wsite-menu-item-wrap">
            <a class="wsite-menu-item">New 2</a>
            <span class="icon-caret"></span>
          </li>
        </ul>
      </div>
    </li>

    <li class="wsite-menu-item-wrap has-submenu">
      <a class="wsite-menu-item">Work</a>
      <span class="icon-caret"></span>
      <div class="wsite-menu-wrap">
        <ul class="wsite-menu">
        </ul>
      </div>
    </li>

  </ul>
</div>