切换不同的类.click（）

Question

我有两个菜单项下拉到一个固定的位置'超级菜单'（由类.has_children定义）。然而，下面的jQuery意味着我可以点击两个下拉菜单，它们将叠加在彼此之上;我想要的是在任何时候只能看到一个菜单。即当前人隐藏并且一次点击变得可见。

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>

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


});