Question

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

这是我的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）添加更多参数。

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

设置Bootstrap Hover菜单的定时延迟

1 个答案: