javascript - 切换不同的类 .click()

Question

我有两个菜单项，它们下拉到固定位置“大型菜单”(由类 .has_children 定义)。然而，下面的 jQuery 意味着我可以单击两个下拉菜单，它们将彼此重叠；我想要的是同时不超过 1 个菜单可见。即当前的隐藏，单击的变为可见。

jQuery

jQuery(document).ready(function($) {

  $('li.has_children a').click(function() {
    $(this).closest($('li.has_children')).find('ul.sec_nav').toggleClass('is_hidden');
  });

});

HTML

<li class="has_children"><a href="#">Games</a>
  <ul class="is_hidden sec_nav">
    <li>
      <h4>Board Games</h4>
      <ul class="is_hidden">
        <li>Listing</li>
        <li>Listing</li>
        <li>Listing</li>
        <li>Listing</li>
      </ul>
    </li>
  </ul>
</li>

<li class="has_children"><a href="#">Computers</a>
  <ul class="is_hidden sec_nav">
    <li>
      <h4>Windows</h4>
      <ul class="is_hidden">
        <li>Listing</li>
        <li>Listing</li>
        <li>Listing</li>
        <li>Listing</li>
      </ul>
    </li>
  </ul>
</li>

Answer 1

您只需将类添加到其他元素即可隐藏它们

jQuery(document).ready(function($) {

  $('li.has_children a').click(function() {
    var $target = $(this).closest('li.has_children').find('ul.sec_nav').toggleClass('is_hidden');
    $('li.has_children ul.sec_nav').not($target).addClass('is_hidden')
  });

});

.is_hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="has_children"><a href="#">Games</a>
    <ul class="is_hidden sec_nav">
      <li>
        <h4>Board Games</h4>
        <ul class="is_hidden">
          <li>Listing</li>
          <li>Listing</li>
          <li>Listing</li>
          <li>Listing</li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="has_children"><a href="#">Computers</a>
    <ul class="is_hidden sec_nav">
      <li>
        <h4>Windows</h4>
        <ul class="is_hidden">
          <li>Listing</li>
          <li>Listing</li>
          <li>Listing</li>
          <li>Listing</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>