javascript - 侧边栏子菜单元素未按应有的方式显示/隐藏

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");
});