麻煩隱藏「下拉」菜單

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"); 

嘗試它曾經