jquery - 悬停时显示子菜单并将其保留在那里

Question

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

我的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 上以选择一个元素时，我只是将它保留在那里。

非常感谢

Answer 1

我认为您的工具正在显示和隐藏菜单...尝试:

$('#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();
});

您也可以像$(this).unbind('hover');那样取消绑定(bind)悬停事件，但是如果页面中的另一个操作关闭它并且你想重新打开，你必须重新绑定(bind)悬停事件。