菜单显示/隐藏使用jQuery

这是一个菜单的CSS菜单显示/隐藏使用jQuery

<span id="menu2">Menu 2</span>

CSS的上述股利

#menu2_submenu{ 
    position:absolute; left:375px; top:35px; background-color:#111; height:50px; width:160px; color:#424242; 
}

子菜单

<div id="submenu"> 
         <div id="submenu1">submenu1</div> 
         <div id="submenu2">submenu2</div> 
</div>

和去w的jquery代码第i个以上

$('#menu2').mouseover(function(){ 
       $('#submenu').show(); 
       }); 



$('#submenu').mouseleave(function(){ 
        $('#submenu').hide(); 
        });

当鼠标在MENU2 $（ '＃子菜单'）。所示，并当鼠标离开$（ '＃子菜单'），$（ '＃子菜单'）。兽皮。现在这很好，问题是，当鼠标离开菜单2时，鼠标是否进入子菜单＃menu2应该隐藏。

我不能在＃menu2和#submenu上使用mouseleave，我该怎么做。

感谢让

来源

2010-07-25 X10nD

试试这个...我希望这将有助于它是隐藏数据的jQuery插件.. http://www.randomsnippets.com/2011/04/10/how-to-hide- show-or-toggle-your-div-with-jquery/ – ashishashen 2012-02-23 10:58:03

尝试使用插件，不发明一种自行车： jQueryMenu

来源

2010-07-25 20:20:41

这就是最简单的部分.. – X10nD 2010-07-25 20:31:11

我不知道我理解你的问题，但我会告诉你我做什么一般在这种情况下。

// First I block the event from bubbling up to the document 
$("#menu2, #submenu").mouveover(function(ev) { ev.stopPropagation(); } 

// Then, when entering the #menu2, show the #submenu, but also install a listener 
// for the rest of the document to hide the #submenu. 
$("#menu2").mouseenter(function() { 
    // Going back from submenu to menu should do nothing (make sure to not leave a gap) 
    var submenu = $("#submenu:hidden"); 
    if (submenu.length > 0) { 
    submenu.show(); // Only if it's hidden 
    $(document).one("mouseover", function() { 
     submenu.hide(); 
    }); 
    } 
});

来源

2010-07-25 20:32:29 zimbatm

菜单显示/隐藏使用jQuery

回答

相关问题