How to detect mouse over child in jQuery?
I have a menu-submenu-subsubmenu in HTML like this:
<menu> <li><a href="...">Item 1</a></li> <li><ul> <li><a href="...">Subitem 1</a></li> <li><a href="...">Subitem 2</a></li> <li><ul> <li><a href="...">Sub-subitem 1</a></li> <li><a href="...">Sub-subitem 2</a></li> <li><a href="...">Sub-subitem 3</a></li> </ul> <a href="...">Subitem 3</a></li> <li><a href="...">Subitem 4</a></li> </ul> <a href="...">Item 2</a> </li> <li><a href="...">Item 3</a></li> <li><a href="...">Item 4</a></li> ... using whit this css formating:
menu { display: block; width: 200px; } /* hide subitems */ menu li ul, menu li ul li ul { display: none; position: absolute; } /* set up positions */ menu li ul { left: 200px; width: 200px; } menu li ul li ul { left: 400px; width: 200px; } I am using this jQuery code:
$(function() { /* hide all submenu */ $('menu').find('ul').hide(); /* show submenu on mouseenter */ $('menu li a').mouseenter(function() { $(this).parent().children('ul').show(); }).mouseleave(function() { $(this).parent().children('ul').hide(); }); }); How can I find that a mouse leaves an element for its child? Or how can I make the child remain, if necessary?
+7
netdjw
source share2 answers
Change your code like this:
$(function() { /* hide all submenu */ $('menu').find('ul').hide(); /* show submenu on mouseenter */ // here, just select the direct child $('menu').find('li > a, li > ul').mouseenter(function() { var time = new Date().getTime(); $(this).parent().find('ul').show().data('showing-time', time); }).mouseleave(function() { var leaveTime = new Date().getTime(); var $this = $(this); window.setTimeout(function () { var $ul = $this.parent().find('ul'); var beginTime = $ul.data('showing-time') || 0; if (leaveTime > beginTime) { $this.parent().find('ul').hide().data('showing-time', 0); } }, 100); }); }); Hope this helps.
Update
Updated code.
I suggest simply placing a submenu next to the parent menu item (here, therefore, the li > a element) to get a better result.
+4
Geoffrey xia
source shareHere is how I would do it. You don't need javascript at all, at least not for simple hiding / showing. But if you want to add delays, I would strongly suggest using jquery only to add / remove the corresponding css classes using settimeout .
CSS
.menu { position: relative; display: inline-block; } .submenu { display: none; position: absolute; left: 100%; } .menu li:hover > .submenu, .submenu.show { display: inline-block; } HTML:
<ul class="menu"> <li><a href="...">Item 1</a></li> <li><ul class="submenu"> <li><a href="...">Subitem 1</a></li> <li><a href="...">Subitem 2</a></li> <li><ul class="submenu"> <li><a href="...">Sub-subitem 1</a></li> <li><a href="...">Sub-subitem 2</a></li> <li><a href="...">Sub-subitem 3</a></li> </ul> <a href="...">Subitem 3</a></li> <li><a href="...">Subitem 4</a></li> </ul> <a href="...">Item 2</a> </li> <li><a href="...">Item 3</a></li> <li><a href="...">Item 4</a></li> </ul> JS:
$('body').on('mouseleave','.submenu', function(e) { var jTarget = $(e.currentTarget).addClass('show'); setTimeout(function() { jTarget.removeClass('show'); }, 500); }) Check out this jsfiddle with js delay: http://jsfiddle.net/LxL4N/1/
+2
bearfriend
source share