4

我创建了一个可折叠的菜单，其结构如下：

  • 家长
  • 家长 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');
        });
    });

基本上我想在父项悬停时打开子类别，但只在整个列表的鼠标悬停时折叠打开的子类别，而不仅仅是父项。我当前的代码不这样做。我需要做哪些改变？

jsfiddle 在这里http://jsfiddle.net/zkhVC/4/

4

3 回答 3

3

这应该解决您的要求：

$('#head').mouseleave(function() {

    $(this).find('li ul').each(function () {
        $(this).stop().slideUp('slow');
    });

});

$("ul li").mouseenter(function() {
    $(this).children('ul').stop().slideDown('slow');
});​

小提琴

这里

解释

  • 不要使用hover事件，因为它会一次又一次地被触发，你已经超过了元素。你想mouseenter改用。
  • 使用mouseleave代替mouseout：

该mouseleave事件不同于mouseout它处理事件冒泡的方式。如果mouseout在此示例中使用，则当鼠标指针移出 Inner 元素时，将触发处理程序。这通常是不受欢迎的行为。mouseleave另一方面，该事件仅在鼠标离开它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标离开外部元素而不是内部元素时触发处理程序。

  • 深入了解选择器的工作原理：您不需要children这里的函数。
  • 您想stop在调用动画之前使用该函数以防止动画缓冲。
于 2012-10-21T09:35:43.180 回答
1

它看起来有点奇怪，但也许我们可以这样解释：

似乎 mouseout () 事件被发送到 ul.root-tags 的子级。所以你应该尝试 event.stopPropagation() 方法避免冒泡。

$('ul.root-tags').mouseout(function(e) {
    e.stopPropagation();
    $(this).children('li ul').each(function () {
        $(this).slideUp('slow');
    });
});

如果它现在不起作用，使用 e.target，您可能会准确找到谁调用了谁。

于 2012-10-21T09:30:32.457 回答
1

使用 jQuerymouseleave代替mouseout：

$('ul.root-tags').mouseleave(function() {
    $(this).find('ul').slideUp('slow');
});

$("ul.root-tags li").hover(function() {
    $(this).find('ul').slideDown('slow');
})​

看到这个FIDDLE。

于 2012-10-21T09:32:52.870 回答