0

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

我的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 以选择一个项目时，我只是将其保留在那里。

非常感谢

4

3 回答 3

0

尝试将下拉菜单项放在菜单项中

<div class="shoplink">
     <a>Online Shop</a>
     <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 -->
</div>

演示：http: //jsfiddle.net/cU629/

于 2013-02-28T02:29:59.200 回答
0

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

$('#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');，但是，如果页面中的另一个操作将其关闭并且您想重新打开，则必须重新绑定悬停事件。

于 2013-02-28T02:30:02.920 回答
0

更改您的 HTML 以包装整个子菜单和菜单项<div class="shoplink">

你的代码会像

<div class="shoplink">
  menu item
    sub menu
</div>

或作为先前的答案，将您的 java 脚本更新为

$('#shop-menu').hide();
$('.shoplink').live('hover', function(e) {
    $(this).addClass('activeitem');
    $('#shop-menu').show();
});

并在之后添加以下代码

$('#shop-menu').live('mouseleave', function(e) {
    $('.shoplink').removeClass('activeitem');
    $('#shop-menu').hide();
});
于 2013-02-28T03:28:25.487 回答