jquery - Trouble hiding "dropdown" menu -
i've made "dropdown" menu. works when open/show can't close/hide it?
<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");
here open/show "dropdown" menu (works)
$(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; });
here 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; });
try using this,
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; } });
Comments
Post a Comment