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

我有两个菜单项，它们会落入固定位置的“大型菜单”（由类.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>

最佳答案

您可以将类添加到其他元素以隐藏它们

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>

关于javascript - 切换不同的类.click()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33538837/