Когда открывается одно раскрывающееся окно, закрывается другое

Question

У меня есть два раскрывающихся меню для мобильного мобильного сайта, один для категорий блога, а другой для раскрывающегося окна поиска. Они прекрасно работают, но когда вы открываете один, то другой может выглядеть немного грязным. Я искал что-то, что когда кто-то открыт, и пользователь щелкает, чтобы открыть другой, выслушайте и закройте его. У меня было исследование, и я обнаружил, что большинство функций используют «родительский» и «дочерний», но не уверены, как это применимо к моему фрагменту кода. Я также изучал удаление классов, но, похоже, ничего подобного не делает. Если у кого-нибудь есть предложения по моей проблеме, я был бы благодарен.

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();, просто slideUp все другие выпадающее меню.

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

Extra: Некоторые фрагменты кода не нужны и могут быть оптимизированы (если вы havn't при условии, что весь 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 
}); 

Источник()

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