javascript - 如何防止 bootstrap 下拉菜单在悬停时打开

Question

我的导航栏上有一个 Bootstrap 下拉菜单，只要我将鼠标悬停在链接上，它就会打开。但是，它变得很烦人，因为在我的应用程序的某些屏幕上，我在屏幕右上角附近有按钮，当用户将鼠标移动到按钮附近时，下拉菜单会在悬停时打开。我宁愿只在您单击链接时才打开它。

  <ul class="nav navbar-nav navbar-right">
        <li role="presentation" class="dropdown">
            <a href="#" class="dropdown-toggle" style="font-size: medium" data-toggle="dropdown" role="button" aria-expanded="false">
                <i class="glyphicon glyphicon-user"></i>&nbsp; @User.Identity.GetDisplayName() &nbsp;
                <i class="fa fa-caret-down"></i>
            </a>                
            <ul class="dropdown-menu">
                    <li>@Html.ActionLink("User Admin", "Index", "Users")</li>
                    <li role="separator" class="divider"></li>
                    <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
                    <li role="separator" class="divider"></li>
                <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
            </ul>            
        </li>
    </ul>

Answer 1

将此添加到您的自定义 javascript 中:

$(document).ready(function () {
$(document).click(function (event) {
    var clickover = $(event.target);
    var _opened = $(".navbar-collapse").hasClass("in");
    if (!$(event.target).closest('.navbar').length && _opened === true && !clickover.hasClass("navbar-toggle")) {
        $(".navbar-collapse").collapse('toggle');
    }
});

});

看看你在codepen中的例子 https://codepen.io/faw/pen/MmoOjm