切換不同的類.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') 
    }); 


});