无法隐藏“下拉菜单”

时间:2016-11-10 09:35:03

标签: jquery html menu jquery-animate dropdown

我已经制作了一个“下拉菜单”。当我打开/显示它但我无法关闭/隐藏它时,它可以正常工作吗?

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

2 个答案:

答案 0 :(得分: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;

  }
});

答案 1 :(得分:0)

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

尝试一次