无法隐藏“下拉”菜单答案

【问题标题】：Trouble hiding "dropdown" menu无法隐藏“下拉”菜单
【发布时间】：2016-11-10 09:35:03
【问题描述】：

我制作了一个“下拉”菜单。当我打开/显示它但我无法关闭/隐藏它时它工作得很好？

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

【问题讨论】：

您错过了(".expand-menu"); 和(".cities") 中的$ 符号。此外，您所有的变量都已经是 jQuery 对象，因此您无需再次调用 $ 函数：$(Expand_menu) -> 只需 Expand_menu.animate...

标签： jquery html menu jquery-animate dropdown

【解决方案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;

  }
});

【讨论】：

【解决方案2】：

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

试一试

【讨论】：