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

首先，如果菜单上没有带有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

我能够破解代码...

New format Datetime: Apr 10 14:11:18

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

3 个答案: