[英]How to detect mouse is over a child element in jQuery?
我在HTML中有一个menu-submenu-subsubmenu构造,如下所示:
<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>
...使用whit这个css格式化:
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;
}
我用这个jQuery代码:
$(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();
});
});
如何检测鼠标是否将元素留给孩子? 或者,如果有必要,我怎样才能让孩子元素留下来?
将您的代码更改为:
$(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);
});
});
希望这可以帮助。
更新
代码已更新。
我建议只需将子菜单放在父菜单项旁边(这里,意思是li > a
元素)以获得更好的结果。
这是我如何去做的。 你根本不需要javascript,至少不需要简单的隐藏/显示。 但是,如果你想添加延迟,我强烈建议只使用jquery来添加/删除带有settimeout
适当的css类。
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);
})
用js延迟查看这个jsfiddle: http : //jsfiddle.net/LxL4N/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.