菜單顯示/隱藏使用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

回答

相關問題