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

我正在尝试使用jquery为我的网站创建一个简单的侧栏，但我在使用它的悬停功能时遇到了一些问题。当用户将鼠标悬停在某个类别上时，会出现一个子菜单。如果上面或下面的类别悬停，我希望子菜单关闭。我创建了一个JSFIDLE来帮助显示我的问题，以及子菜单如何不会像应该的那样关闭。我已经花了好几个小时试图弄明白这一点，我将非常感谢任何人的帮助

谢谢。

---

只需添加一个

$（“.submenu”）.hide（）在悬停开始时。
您忘记在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");
});

你忘了隐藏列表

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

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

})


但这只能用css来完成。。作者：

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

在所有的.css（）边框中（更有意义的是，如果你想制作一个跨浏览器的动画来显示/隐藏），只需修改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");
});

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


如果已将
鼠标悬停
侦听器附加到元素，则
鼠标悬停
也是不必要的。这也更简单，更容易阅读

@MHZ如果这是您想要的，请将此问题标记为正确。