...">
All geek questions in one place

Is there a better way to make dropdowns in jQuery?

I am trying to use jQuery hover for dropdown menus. So the first thing I try:

 <ul id="menu"> <li> <ul> ... </ul> </li> ... </ul> $(" #menu ul ").css({display: "none", visibility: "hidden"}); $(" #menu li ").hover(function() { $(this).find('ul:first:hidden').css(visibility:"visible", display:"block"}).show('fast'); }, function() { $(this).find('ul:first').css({visibility:"hidden", display:"none"}); });

and it works fine ... in Firefox. Unfortunately, in the version of Chrome I run (9.0.597.94), if you hover over this dropdown menu, it starts the mouse at $ ("# menu li #").

So good, we have a race condition, all I have to do is add some timers ...

 (function(){ var timer; $(" #menu li ").hover(function() { $(this).find('ul:first:hidden').css(visibility:"visible", display:"block"}).show('fast'); }, function() { var header = $(this); timer = setTimeout(function() { header.find('ul:first').css({visibility:"hidden", display:"none"}); }, 100); }); $(" #menu li > ul ").hover(function() { clearTimeout(timer); }, function() { $(this).css({visibility:"hidden", display:"none"}); }); }();

What really works until someone says we need to put a textbox in that dropdown menu ; and, of course, the text field makes the mouse shoot at $ ("#menu li> ul"), so now I need to put another nested timer layer, and I think to myself: this is the best way to do this !

So, I was hoping that someone could understand me ...

+4
source share
2 answers

Is there a reason you can't use Suckerfish (or be sophisticated Superfish )? It seems to be a wheel that does not need to be reinvented ...

+2
source

In any case ... I think you can look here: 38 jQuery and CSS Drop Down Layered menus .

+2
source

Source: https://habr.com/ru/post/1339289/

More articles:


All Articles