在悬停时显示子菜单并将其保留在那里(Display submenu on hover and keep it there)

在悬停时显示子菜单并将其保留在那里(Display submenu on hover and keep it there)

当我将鼠标悬停在菜单项上时，背景会改变颜色并显示子菜单。 当我将鼠标从菜单项移动到子菜单时，如何让子菜单继续显示并保留更改背景？

我的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.