如何切换单击的菜单链接并取消切换所有切换的链接

Question

我的网站附带了这个用于子菜单切换的 javascript，但是，当我点击一个新的菜单链接时，其余切换的链接不会关闭，所以它们都保持打开状态。

如何仅切换点击链接并取消切换或删除所有“打开”链接？如果您有新的 javascript 格式也可以。

jQuery(函数($) {

$('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

首先，如果菜单上没有 jQuery 动画，我将删除 display: none。此外，我不知道您的 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>

Answer 3

我能够破解密码...

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