当一个下拉菜单打开时会关闭另一个

Question

我有一个移动响应站点的2个下拉菜单，一个用于博客类别，另一个用于下拉搜索框。这些工作正常，但当你打开一个，然后另一个它可以看起来有点凌乱。我一直在寻找一些东西，当一个人打开并且一个用户点击打开另一个人时，倾听并关闭它。我有一个研究，我发现大多数函数使用'父'和'孩子'，但不知道它如何适用于我的代码片段。我也研究过删除类，但似乎没有办法。如果有人对我的问题有任何建议，我会很感激。

HTML

<div id="nav-mobile-responsive"><!--Mobile Navigation--> 
     <div class="categories-mobile-responsive"> 
      <ul id="nav-1"> 
       <li> 
        <h3></h3> 
        <ul> 
         <?php wp_list_categories('&title_li=') ?> 
        </ul> 
       </li> 
      </ul>   
     </div> 
     <div class="searchbar-mobile-responsive"> 
      <ul id="nav-2"> 
       <li><h3></h3> 
        <ul> 
         <form method="get" id="searchform-mobile" action="<?php echo home_url('/'); ?>"> 
         <div id="search-inputs"> 
         <input type="text" value="" name="s" id="search-box" placeholder="SEARCH" /> 
         <input type="hidden" name="ref_url" value="<?php esc_url($_SERVER['REQUEST_URI'])?>"> 
         </div> 
         </form> 
        </ul> 
       </li> 
      </ul>   
     </div> 
    </div> 

Javascript功能来切换两个下拉菜单为移动和小屏幕：

$('.categories-mobile-responsive,.searchbar-mobile-responsive').click(function(){ 
       $(this).find('ul#nav-1,ul#nav-2').find('ul').slideToggle(); 
      }); 

$("#searchform-mobile").click(function(event){ event.stopPropagation(); }); 

Answer 1

之前$(this).find('ul#nav-1,ul#nav-2').find('ul').slideToggle();，只是效果基本show所有其他的下拉菜单。

$('.categories-mobile-responsive,.searchbar-mobile-responsive').click(function(){ 
    $(this).siblings().find('ul ul').slideUp(); 
    $(this).find('ul#nav-1,ul#nav-2').find('ul').slideToggle(); 
}); 

额外：的代码一些位是不必要的，并且可以被优化（除非你没有带提供的整个HTML结构 - 在这种情况下，这可能会破坏它）：

$('nav-mobile-responsive div').click(function(){ //only one selector 
    $(this).siblings().find('ul ul').slideUp(); 
    $(this).find('ul ul').slideToggle(); //only call .find() once 
}); 

来源（S）

jQuery API - .slideUp()
jQuery API - .siblings()