jQuery Drop Menu Click not Hover -
jQuery Drop Menu Click not Hover -
i'm trying drop menu work click instead of hover cant seem work. ideas ?
// drop menu $(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); $(".navigation ul li, .shoppingbasket ul li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).slidedown(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); });
.hover() takes 2 handlers, first 1 executed when mouse enters, sec executed when mouse leaves. reason, swapping .hover() .click() not work, since .click() takes 1 handler executes when click. however, .toggle() can used bind multiple handlers executed on alternate clicks.
$(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); $(".navigation ul li, .shoppingbasket ul li").toggle(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).slidedown(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); });
try out here.
also, it's hard tell w/o html, .slidedown() create element visible, , may want utilize .slideup(). might want seek this:
$(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); $(".navigation ul li, .shoppingbasket ul li").toggle(function(){ $(this).find('ul:first').slidedown(400); },function(){ $(this).find('ul:first').slideup(400); });
try out here.
in fact, why not utilize .slidetoggle(), makes things more compact , allows utilize .click()?
$(".navigation ul ul, .shoppingbasket ul ul").css({display: "none"}); $(".navigation ul li, .shoppingbasket ul li").click(function(){ $(this).find('ul:first').slidetoggle(400); });
try out here.
jquery
Comments
Post a Comment