如何在单个li元素的悬停上打开列表，只在ul的鼠标上崩溃
提问于 2012-10-21 01:16:09
我创建了一个具有如下结构的可折叠菜单：
- 父级
- 父母2
- 亲本3
- 子范畴
我有以下的javascript
var config = {
over: function() { $(this).children('ul').slideDown('slow'); },
timeout: 5,
out: function() { }
}
$("ul.root-tags li").hoverIntent(config);
$('ul.root-tags').mouseout(function() {
$(this).children('li ul').each(function () {
$(this).slideUp('slow');
});
});基本上，我希望在父项的悬停时打开子类别，但只在整个列表的鼠标退出上折叠打开的子类别，而不仅仅是父项。我的当前代码没有这样做。我需要做什么改变？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-10-21 01:35:43
这应该解决您要求的内容：
$('#head').mouseleave(function() {
$(this).find('li ul').each(function () {
$(this).stop().slideUp('slow');
});
});
$("ul li").mouseenter(function() {
$(this).children('ul').stop().slideDown('slow');
});Fiddle
解释
- 不要使用
hover事件，因为它会一次又一次地被触发--您正在处理该元素。您希望使用mouseenter代替。 - 使用
mouseleave而不是mouseout
mouseleave事件在处理事件冒泡的方式上不同于mouseout。如果在本例中使用mouseout，则当鼠标指针移出内部元素时，将触发处理程序。这通常是不可取的行为。另一方面，mouseleave事件只在鼠标离开绑定到的元素时才触发它的处理程序，而不是后代。因此，在本例中，当鼠标离开外部元素(而不是内部元素)时，将触发处理程序。
- 深入了解选择器的工作原理:这里不需要
children函数。 - 您希望在调用动画之前使用
stop函数来防止动画缓冲。
Stack Overflow用户
发布于 2012-10-21 01:30:32
看起来有点奇怪，但也许我们可以这样解释：
看起来mouseout ()事件是发送给ul.root标记的子事件的。因此，您应该尝试使用event.stopPropagation()方法来避免冒泡。
$('ul.root-tags').mouseout(function(e) {
e.stopPropagation();
$(this).children('li ul').each(function () {
$(this).slideUp('slow');
});
});如果它现在不起作用，使用e.target，您可能会确切地知道是谁在打电话给谁。
Stack Overflow用户
发布于 2012-10-21 01:32:52
使用jQuery的mouseleave而不是mouseout
$('ul.root-tags').mouseleave(function() {
$(this).find('ul').slideUp('slow');
});
$("ul.root-tags li").hover(function() {
$(this).find('ul').slideDown('slow');
})看这个小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12996529
复制相关文章
腾讯云开发者
