CODEWITHSUNDEEP
jquery
Marlon Creative
Marlon Creative

Reputation: 3846

Need help fixing this jQuery dropdown script

I'm working on a script for a dropdown menu. It's working fine so far, but I need to add one more thing and I can't figure it out. Here's the current script:

 $j('ul.menu > li').hover(

    function() { var ulHeight = $j('ul', this).height(); $j(this).children('ul').css({height: 0}).stop().animate({height: ulHeight}, 400); },
    function() { $j(this).children('ul').stop().animate({height: 0}, 400);   }
);

I need to to return the height of the UL to it's original size, and set the display to none, so it can run again. The way it is now, as the height is set to 0 on leaving, the next time the "ulHeight" is taken it's 0.

I tried it like this but no joy:

 function() { $j(this).children('ul').stop().animate({height: 0}, 400).css({height: ulHeight});   }

Anyone any ideas?

Upvotes: 0

Views: 112

Answers (2)

Mottie
Mottie

Reputation: 86413

Your sub menus aren't showing at all...

but ultimately, why reinvent the wheel? http://css-tricks.com/simple-jquery-dropdowns/ or Superfish

The only thing I would suggest, now that I've looked at your new code, is replace

.css({"display": "block"});
.css({"display": "none"});

with

.show();
.hide();

respectively, and you could use .hover instead of .mouseenter and .mouseleave

Check it out here... I couldn't edit your code in jsbin (the edit window was 3 lines high and I couldn't scroll) so I reposted it to pastebin.

Upvotes: 1

slikts
slikts

Reputation: 8158

The default value for the height property is auto. You should set it to that, instead of 0, when hiding.

Upvotes: 0

Related Questions