如何在jquery菜单中隐藏子菜单

Question

我有像fllowing code这样的菜单

             

主页             

                
• 子项目1                     
                          
  • 子项目1.1                             
                                    
    • 子项目1.1.1
                                    
    • 子项目1.1.2
                                
                            
                          
  • 子项目1.2
                          
  • 子项1.3
                          
  • 子项目1.4
                          
  • 子项目1.5
                          
  • 子项目1.6
                          
  • 子项目1.7                         
                      
                  
                
• 子项目2
                
• 子项目3
            

        

        

产品信息             

                
• 子项目1                 
                
• 子项目2                     
                          
  • Sub Item 2.1
                          
  • 子项目2.2
                      
                  
                
• 子项目3
                
• 子项目4
                
• 子项目5
                
• 子项目6
                
• 子项目7
            

        

    

和一个css文件来安排项目作为verical菜单，我在这里用jquery显示子菜单

$(document).ready(function(){
    var ss="#menu li:hover>div";
    $("div#menu li:parent").hover(function(){
        $(ss).show(500);

    });
});

现在如何在鼠标离开物品时隐藏这个子菜单???? 有人可以帮帮我吗？

Answer 1

你的意思是这样的：

var ss = "#menu li:hover>div";
$("div#menu li:parent").hover(
    function() {
        $(ss).show(); //this is the mousein
    },
    function() {
        $(ss).hide(); //this is the mouseout
    }
);

请记住，悬停可以进行两次回调，当鼠标离开元素时，将调用第二个回调。

http://api.jquery.com/hover/

Answer 2

使用mouseleave事件