Jquery 切换$this的类，隐藏其他类

我正在WordPress中建立一个点击下拉菜单。一切都正常工作，但有一个特性让我感到困惑。下拉菜单通过切换“show”类在单击时展开和折叠。我还需要添加功能，以便在单击另一个父导航项时隐藏展开的下拉列表。这样，两个下拉列表将永远不会同时打开。代码如下，谢谢

HTML

---

只需先将它们全部隐藏，同时保持单击的一个的状态，以便切换：

$（“#主导航菜单项有子项”）。单击（函数（）{
var state=$（'>.sub-menu'，this.hasClass（'show'）；
$（'#主导航菜单项有子菜单'）.removeClass（'show'）；
$（'>.sub-menu'，this）.toggleClass（'show'，！state）；
});
。子菜单{显示：无}
.sub-menu.show{display:block}
.菜单项有子项{cursor:pointer}


父导航项一

下拉项

下拉分项
下拉分项


下拉项

父导航项二

下拉项
下拉项



<ul id="primary-nav">
  <li class="menu-item-has-children">Parent Nav Item One

    <!-- if Parent Nav Item Two is clicked and this sub-menu is visible, hide this sub-menu -->
    <ul class="sub-menu">
      <li class="menu-item-has-children">Drop Down Item
        <ul class="sub-menu">
          <li>Drop Down Sub Item</li>
          <li>Drop Down Sub Item</li>
        </ul>
      </li>
      <li>Drop Down Item</li>
    </ul>
  <li class="menu-item-has-children">Parent Nav Item Two

    <!-- if Parent Nav Item One is clicked and this sub-menu is visible, hide this sub-menu -->
    <ul class="sub-menu">
      <li>Drop Down Item</li>
      <li>Drop Down Item</li>
    </ul>
  </li>
</ul>

$('#primary-nav .menu-item-has-children').click(function() {
  $('> .sub-menu', this).toggleClass('show');
});