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

尝试将下拉列表放在菜单项

中

<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/

Answer 2

我认为您的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');这样的悬停事件，但是如果页面中的其他操作关闭它并且您想要重新打开，则必须重新绑定悬停事件。

Answer 3

更改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();
});

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

3 个答案: