Question

我正在尝试使用jquery为我的网站创建一个简单的侧边栏，我在使用它的悬停功能时遇到了一些麻烦。当用户将鼠标悬停在某个类别上时，会出现一个子菜单。如果上面或下面的类别悬停，我希望子菜单关闭。我创建了一个jsFiddle来帮助显示我的问题，以及子菜单如何不按照它应该关闭。我一直试图想出这几个小时，我将非常感谢任何帮助。

http://jsfiddle.net/BGcDc/7/

谢谢。

Answer 1

您忘记在mouseleave功能中隐藏您的子地板。只需将$(this).find(".submenu").hide();添加到现有处理程序：

$(".category").mouseleave(function() {
    $(this).find(".submenu").hide();
    $(this).css("background-color", "#eee");
    $(this).css("border", "1px solid grey");
    $(this).css("border-bottom", "none");
    $(this).css("width", "180px");
    $(".category:last").css("border-bottom", "1px solid grey");
});

Answer 2

http://jsfiddle.net/ahren/BGcDc/8/

只需在悬停开始时添加$(".submenu").hide();。

Answer 3

你忘了隐藏列表

$(".category").mouseleave(function() {

    $(this).find(".submenu").hide();

})

http://jsfiddle.net/BGcDc/10/

但这可以用css只有面团来完成.. by：

.category .submenu{ display:none}
.category:hover .submenu{ display:block}

并且你所有的.css（）边界都很巧妙（并且更有意义，如果你想让跨浏览器动画显示/隐藏它可能会有意义）

Answer 4

只需修改您的javascript：

$(".category").mouseleave(function() {
    // add this
    $(".submenu").hide();
    $(this).css("background-color", "#eee");
    $(this).css("border", "1px solid grey");
    $(this).css("border-bottom", "none");
    $(this).css("width", "180px");
    $(".category:last").css("border-bottom", "1px solid grey");
});

Answer 5

.hover() jQuery方法接受2个参数，您可以在第2个参数中使用匿名函数对象来隐藏子菜单，类似于在第1个参数的函数中显示它的方式。

<强> Fiddle

如果您已经在元素上附加了mouseleave侦听器，则.hover也是不必要的。这也更简单，更容易阅读。

Fiddle

补充工具栏子菜单元素未按其应显示/隐藏

5 个答案: