当我将鼠标悬停在菜单项上时,背景会改变颜色并显示子菜单。 当我将鼠标从菜单项移动到子菜单时,如何让子菜单继续显示并保留更改背景?
我的HTML
<div class="shoplink"><a>Online Shop</a></div> <div id="shop-menu"> <ul> <li>Food</li> <li>Home & Living</li> <li>Personal Assistance</li> <li>Kids</li> <li>Musical Instruments</li> <li>Beauty & Wellbeing</li> <li>Outdoor</li> <li>Office & Stationery</li> <li>Cards & Gift Paper</li> <li><b>Browse All</b></li> </ul> </div> <!-- #shop-menu -->我的JS到目前为止....
$('#shop-menu').hide(); $('.shoplink').live('hover', function(e) { $(this).toggleClass('activeitem'); $('#shop-menu').toggle(); });所以当我将鼠标悬停在.sublink上时,我可以显示商店菜单。 当我将鼠标从.shoplink移动到#shop-menu选择项目时,我就把它保留在那里。
非常感谢
When I hover over a menu item, the background changes colour and also a submenu gets displayed. How to get the submenu to continue to display and the changes background to remain when I move the mouse form the menu item onto the submenu?
My html
<div class="shoplink"><a>Online Shop</a></div> <div id="shop-menu"> <ul> <li>Food</li> <li>Home & Living</li> <li>Personal Assistance</li> <li>Kids</li> <li>Musical Instruments</li> <li>Beauty & Wellbeing</li> <li>Outdoor</li> <li>Office & Stationery</li> <li>Cards & Gift Paper</li> <li><b>Browse All</b></li> </ul> </div> <!-- #shop-menu -->My JS so far....
$('#shop-menu').hide(); $('.shoplink').live('hover', function(e) { $(this).toggleClass('activeitem'); $('#shop-menu').toggle(); });So I can display the shop-menu when I hover over .sublink. I just keep it there when I move the mouse from .shoplink onto the #shop-menu to select an item.
Thanks so much
最满意答案
我认为你的toogles正在显示和隐藏菜单...尝试:
$('#shop-menu').hide(); $('.shoplink').live('hover', function(e) { $(this).addClass('activeitem'); $('#shop-menu').show(); });为了更改它,您可以检查@Madhu Rox的答案并执行以下操作:
$('#shop-menu').live('mouseleave', function(e) { $('.shoplink').removeClass('activeitem'); $('#shop-menu').hide(); });您也可以unbind悬停事件,如$(this).unbind('hover'); ,但是,如果页面中的另一个操作关闭它并且您想要重新打开,则必须重新绑定悬停事件。
I think your toogles are displaying and hiding the menu... try:
$('#shop-menu').hide(); $('.shoplink').live('hover', function(e) { $(this).addClass('activeitem'); $('#shop-menu').show(); });In order to change it back, you can check @Madhu Rox answer and do like that:
$('#shop-menu').live('mouseleave', function(e) { $('.shoplink').removeClass('activeitem'); $('#shop-menu').hide(); });You could also unbind the hover event like $(this).unbind('hover');, but then, if another action in the page closes it and you'd want to reopen, you'd have to rebind the hover event.
更多推荐
发布评论