侧边栏子菜单元素没有显示/隐藏，因为他们应该

我想创建一个简单的边栏为我的网站使用jquery，我有一些麻烦与它的悬停功能。当用户悬停在某个类别上时，会出现一个子菜单。如果上面或下面的类别被徘徊，我希望子菜单关闭。我创建了一个jsFiddle来帮助显示我的问题以及子菜单如何不像应该那样关闭。我一直试图弄清楚这几个小时，我非常感谢任何帮助。侧边栏子菜单元素没有显示/隐藏，因为他们应该

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

谢谢。

来源

2012-06-06 AnchovyLegend

你忘了在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-06 03:08:45

完美！这正是我需要的！谢谢！ – AnchovyLegend

@MHZ如果这是你想要的，而不是将此问题标记为正确。 – khurram

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

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

来源

2012-06-06 03:07:46 ahren

你忘了隐藏表格

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

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

})

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

不过这可以通过CSS只能由面团被acomplished ..：

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

而你的所有.css（）边界的corse（） S比的意义，它，如果你想使一个跨浏览器的动画显示/隐藏将可能是有意义的）

来源

2012-06-06 03:09:05

只需修改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-06 03:09:55 tjscience