Trouble hiding "dropdown" menu

Question

Я создал «выпадающее меню». Он отлично работает, когда я открываю/показываю его, но я не могу его закрыть или скрыть?

<div class="expand-menu"> 
    <div class="cities"> 
     <!-- menu content --> 
    </div> 
</div> 
<ul> 
    <li class="choose-btn"> 
     <a href="">City name</a> 
    </li> 
</ul> 

var city_btn = $(".choose-btn"); 
var city_active = $(".choose-btn a"); 
var Expand_menu = (".expand-menu"); 
var City_cont = (".cities"); 

Здесь я открываю/показать свой "выпадающий" меню (работ)

$(city_btn).click(function() { 
    $(Expand_menu).animate({top: "0"}, 'normal'); 
    $(Expand_menu).fadeIn({queue: false, duration: 'normal'}); 
    $(City_cont).fadeIn("normal"); 
    $(city_active).addClass("choose-btn-active"); 
    return false; 
}); 

Здесь я хотел бы, чтобы закрыть/скрыть это

$(city_btn).click(function() { 
    $(Expand_menu).animate({top: "10px"}, 'normal'); 
    $(Expand_menu).fadeOut({queue: false, duration: 'normal'}); 
    $(City_cont).fadeOut("normal"); 
    $(city_active).removeClass("choose-btn-active");   
    return false; 
}); 

Answer 1

Попробуйте использовать, как это,

var city_btn = $(".choose-btn"); 
var city_active = $(".choose-btn a"); 
var Expand_menu = $(".expand-menu"); 
var City_cont = $(".cities"); 

city_btn.click(function() { 

if(city_active.hasClass("choose-btn-active")){ 
    Expand_menu.animate({top: "10px"}, 'normal'); 
    Expand_menu.fadeOut({queue: false, duration: 'normal'}); 
    City_cont.fadeOut("normal"); 
    city_active.removeClass("choose-btn-active"); 

    return false; 

    }else{ 

    Expand_menu.animate({top: "0"}, 'normal'); 
    Expand_menu.fadeIn({queue: false, duration: 'normal'}); 
    City_cont.fadeIn("normal"); 
    city_active.addClass("choose-btn-active"); 

     return false; 

    } 
}); 

Answer 2

var city_btn = $(".choose-btn"); 
var city_active = $(".choose-btn a"); 
var Expand_menu = $(".expand-menu"); 
var City_cont = $(".cities"); 

Try Один раз