标签菜单 - jquery mouseover/mouseout问题

Question

我使用类似于http://yensdesign.com/tutorials/tabs/的标签菜单，但用鼠标悬停而不是点击。目前我必须使用'默认'来关闭菜单。

1. 我如何开始关闭所有下拉菜单？
2. 当用户将鼠标悬停在选项卡上时，菜单应该展开，并且仅当用户将鼠标悬停在展开的菜单外时才关闭。

查询使用：

$(document).ready(function(){ 
$(".menu > li").mouseover(function(e){ 
    switch(e.target.id){ 
    case "default": 
    //change status & style menu 
    $("#default").addClass("active"); 
    $("#elec_gas").removeClass("active"); 
    $("#home_energy").removeClass("active"); 
    //display selected division, hide others 
    $("div.default").css("display", "none"); 
    $("div.elec_gas").css("display", "none"); 
    $("div.home_energy").css("display", "none"); 
    break; 
    case "elec_gas": 
    //change status & style menu 
    $("#default").removeClass("active"); 
    $("#elec_gas").addClass("active"); 
    $("#home_energy").removeClass("active"); 
    //display selected division, hide others 
    $("div.default").css("display", "none"); 
    $("div.elec_gas").fadeIn(); 
    $("div.home_energy").css("display", "none"); 
    break; 
    } 
    //alert(e.target.id); 
    return false; 
}); 
}); 

Answer 1

要开始与他们关闭，给孩子的菜单display: none;一个CSS或做脚本，通过在document.ready处理程序添加此：

$("div.default, div.elec_gas, div.home_energy").hide(); 

---

为了将鼠标悬停在关闭它们......使用mouseleave事件而不是mouseout，如t他：

$(".menu > li").mouseleave(function(e){ 

从the .mouseleave() docs：

的mouseleave事件从mouseout区别它处理事件冒泡的方式。如果在本例中使用mouseout，那么当鼠标指针移出Inner元素时，处理程序将被触发。这通常是不受欢迎的行为。另一方面，mouseleave事件只在鼠标离开绑定元素时触发其处理程序，而不是后代。因此，在此示例中，当鼠标离开元素时触发处理程序，但不会从元素中触发处理程序。