菜单显示/隐藏使用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,我该怎么做。
感谢 让
答
我不知道我理解你的问题,但我会告诉你我做什么一般在这种情况下。
// 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();
});
}
});
试试这个...我希望这将有助于 它是隐藏数据的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