4

我正在尝试使用 jquery 为我的网站创建一个简单的侧边栏，但我在使用它的悬停功能时遇到了一些问题。当用户将鼠标悬停在一个类别上时，假设会出现一个子菜单。如果悬停在上方或下方的类别，我希望关闭子菜单。我创建了一个 jsFiddle 来帮助展示我的问题以及子菜单如何不按应有的方式关闭。我已经尝试解决这个问题几个小时了，我将不胜感激任何帮助。

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

谢谢你。

4

5 回答 5

3

您忘记在 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");
});
于 2012-06-06T03:08:45.190 回答
2

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

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

于 2012-06-06T03:07:46.123 回答
1

你忘了隐藏列表

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

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

})

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

但这可以通过仅使用 css 的面团来完成。通过：

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

而且你所有的 .css() 边界都在那里（更有意义的是，如果你想制作一个跨浏览器动画来显示/隐藏它可能是有意义的）

于 2012-06-06T03:09:05.570 回答
1

只需像这样修改您的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");
});
于 2012-06-06T03:09:55.703 回答
1

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

小提琴

如果您已经有一个附加到元素的侦听器，这也是mouseleave不必要的。.hover这也更简单，更容易阅读。

小提琴

于 2012-06-06T03:11:53.443 回答