Откройте одно выпадающее меню и закройте другое

Question

Я хочу, чтобы противоположное выпадающее окно закрывалось, когда я явно нажимаю на другой.

Я разорвал этот JS из разных мест - я знаю, что делаю это совершенно неправильно. Я попытался взлома несколько других примеров, которые я нашел от переполнения стека, но не мог решить, как применить его к моему коду

$(function() { 
 
    $('.click-nav1 > ul').toggleClass('no-js js'); 
 
    $('div.user_dropdown').hide(); 
 
    $('.click-nav1 .js').click(function(e) { 
 
    $('div.user_dropdown').slideToggle(0); 
 
    $('.clicker').toggleClass('active'); 
 
    e.stopPropagation(); 
 
    }); 
 
    $(document).click(function() { 
 
    if ($('div.user_dropdown').is(':visible')) { 
 
     $('div.user_dropdown', this).slideToggle(0); 
 
     $('.clicker').removeClass('active'); 
 
    } 
 
    }); 
 
}); 
 

 

 

 
$(function() { 
 
    $('.click-nav2 > ul').toggleClass('no-js js'); 
 
    $('div.more_dropdown').hide(); 
 
    $('.click-nav2 .js').click(function(e) { 
 
    $('div.more_dropdown').slideToggle(0); 
 
    $('.clicker').toggleClass('active'); 
 
    e.stopPropagation(); 
 
    }); 
 
    $(document).click(function() { 
 
    if ($('div.more_dropdown').is(':visible')) { 
 
     $('div.more_dropdown', this).slideToggle(0); 
 
     $('.clicker').removeClass('active'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="click-nav1"> 
 
    <ul class="no-js"> 
 
     <li class="avatar clicker"> 
 
       {{ gravatamatic:quicky 
 
        email = "{current_member:email}" 
 
        size = "50" 
 
       }} 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="click-nav2"> 
 
     <ul class="no-js"> 
 
     <li class="clicker"><a href="#search" class="global_btn icon_btn"><span class="icon-more"></span></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
<div class="dropdown user_dropdown"> 
 
    <ul> 
 
    <li>content</li> 
 
    </ul> 
 
</div> 
 
<div class="dropdown more_dropdown"> 
 
    <ul> 
 
    <li>content</li> 
 
    </ul> 
 
</div>

Answer 1

Вы просто можете скрыть другие DIV:

например: $('div.more_dropdown').hide();

Отрывок:

$(function() { 
 
    $('.click-nav1 > ul').toggleClass('no-js js'); 
 
    $('div.user_dropdown').hide(); 
 
    $('.click-nav1 .js').click(function(e) { 
 
    $('div.user_dropdown').slideToggle(0); 
 
    $('div.more_dropdown').hide(); 
 

 
    $('.clicker').toggleClass('active'); 
 
    e.stopPropagation(); 
 
    }); 
 
    $(document).click(function() { 
 
    if ($('div.user_dropdown').is(':visible')) { 
 
     $('div.user_dropdown', this).slideToggle(0); 
 
     $('.clicker').removeClass('active'); 
 
    } 
 
    }); 
 
}); 
 

 

 

 
$(function() { 
 
    $('.click-nav2 > ul').toggleClass('no-js js'); 
 
    $('div.more_dropdown').hide(); 
 
    $('.click-nav2 .js').click(function(e) { 
 
    $('div.more_dropdown').slideToggle(0); 
 
    $('.user_dropdown').hide(); 
 
    $('.clicker').toggleClass('active'); 
 
    e.stopPropagation(); 
 
    }); 
 
    $(document).click(function() { 
 
    if ($('div.more_dropdown').is(':visible')) { 
 
     $('div.more_dropdown', this).slideToggle(0); 
 
     $('.clicker').removeClass('active'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="click-nav1"> 
 
    <ul class="no-js"> 
 
    <li class="avatar clicker"> 
 
     {{ gravatamatic:quicky email = "{current_member:email}" size = "50" }} 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="click-nav2"> 
 
    <ul class="no-js"> 
 
    <li class="clicker"><a href="#search" class="global_btn icon_btn"><span class="icon-more">second</span></a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="dropdown user_dropdown"> 
 
    <ul> 
 
    <li>content</li> 
 
    </ul> 
 
</div> 
 
<div class="dropdown more_dropdown"> 
 
    <ul> 
 
    <li>content2</li> 
 
    </ul> 
 
</div>