Question

我有两个菜单项下拉到固定位置'mega menu'（由类.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

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

＆＃13;

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

＆＃13;

.is_hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用Arun的jQuery我有以下工作：

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

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


});

切换不同的类.click（）

2 个答案: