无法隐藏 "dropdown" 菜单

Question

我做了一个 "dropdown" 菜单。当我 open/show 它时它工作得很好但我不能 close/hide 它？

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

这是我 open/show 我的 "dropdown" 菜单（有效）

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

这里我要close/hide吧

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

试一试

Answer 2

尝试这样使用，

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;

  }
});

无法隐藏 "dropdown" 菜单

Trouble hiding "dropdown" menu

html

jquery

menu

jquery-animate

dropdown