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

如何在悬停时保持引导下拉开启

1 个答案: