javascript - 为 Bootstrap Hover 菜单设置定时延迟

Question

我有一些代码可以让我的 Bootstrap 菜单项在悬停时显示，而不是在单击时显示。 (我知道这有点离题，但这是客户的要求)。它工作正常，但我想要稍微延迟而不是自动显示，这样就不会太烦人。

这是我的CSS:

@media (min-width: 768px) {
.navbar-nav .caret {
display: none;
}
.navbar-nav .open ul {
display: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: white;
background: none;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #969696;
background: none;
}
.navbar-default .navbar-nav > .hovernav > a {
color: white;
}
.navbar-inverse .navbar-nav > .hovernav > a {
color: #969696;
}
.navbar-default .navbar-nav > .hovernav:hover > a,
.navbar-default .navbar-nav > .hovernav:hover > a:hover,
.navbar-default .navbar-nav > .hovernav:hover > a:focus {
color: #333;
background: transparent;
}
.navbar-inverse .navbar-nav > .hovernav:hover > a,
.navbar-inverse .navbar-nav > .hovernav:hover > a:hover,
.navbar-inverse .navbar-nav > .hovernav:hover > a:focus {
color: #fff;
background: transparent;
}
.navbar-default .navbar-nav > li:hover {
background: #e7e7e7;
}
.navbar-inverse .navbar-nav > li:hover {
background: #080808;
}
.navbar-nav .hovernav:hover > .dropdown-menu {
display: block;
}
}

这是我的 javascript:

$(document).ready(function ($, window, delay) {

    var mq = window.matchMedia('(min-width: 768px)');
    if (mq.matches) {
        $('ul.navbar-nav li').addClass('hovernav');
    } else {
        $('ul.navbar-nav li').removeClass('hovernav');
    };

    if (matchMedia) {
        var mq = window.matchMedia('(min-width: 768px)');
        mq.addListener(WidthChange);
        WidthChange(mq);
    }
    function WidthChange(mq) {
        if (mq.matches) {
            $('ul.navbar-nav li').addClass('hovernav');
        } else {
            $('ul.navbar-nav li').removeClass('hovernav');
        }
    };
});

Answer 1

如果您使用 jQueryUI，您可以向 .addClass 和 .removeClass ( doc here ) 添加更多参数。

它将为您的菜单设置动画，您可以指定动画的持续时间。