Question

当我mouseover时，我希望增加子菜单的冻结时间。这是我的code：

<div class="navbar-collapse collapse">
    <ul id="subnav" class="nav navbar-nav">
        <li style="width: 16.6666666666667%">
        <li style="width: 20%">
            <a style="width: 16.6666666666667%" href="/">Home</a>
        </li>
        <li style="width: 20%"><a style="width: 16.6666666666667%">Corporate Information</a><div class="sub-menu" style="overflow: hidden; display: none;">
            <div class="menuInnerLeft"><span>Transforming Care Bringing Health to Every Home 1</span></div>
            <div class="menuInnerRight">
                <ul>
                    <li>
                        <a class="subNavItem" href="http://www.juronghealth.com.sg/We_Are_JurongHealth/Our_Vision_Mission_Value.aspx" target="_blank">Vision, Mission &amp; Values</a>
                    </li>
                    <li>
                        <a class="subNavItem" href="http://www.juronghealth.com.sg/We_Are_JurongHealth/At_the_Helm.aspx" target="_blank">Board &amp; Senior Management</a>
                    </li>
                </ul>
            </div>
    </ul>
</div>

Answer 1

试试这个

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

Answer 2

您可以使用Jquery hover：second参数，该参数是您离开元素时使用的函数：

$(".menu_item").hover(
    function(){},
    //When hovering the item: stuff

    //When You leave the item:
    function(){
        //Leave duration time:
        var duration = 500;
        setTimeout(function(){}, duration );
    }
);

或者使jquery stop（）函数受益。

菜单悬停子菜单 - 更长的时间

2 个答案: