我已经制作了一个“下拉菜单”。当我打开/显示它但我无法关闭/隐藏它时,它可以正常工作吗?
<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;
});
答案 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");
尝试一次