Question

我有一个正常的bootstrap导航栏，上面有一些下拉菜单。当我点击下拉菜单中的一个链接时，屏幕上会出现一个模态框，当我退出模态框然后尝试再次单击导航栏上的下拉列表时它将无法工作，下拉列表周围会出现橙色方形边框好像它不能再次聚焦或什么的。任何想法为什么会发生这种情况？

<div class="navbar navbar-inverse navbar-fixed-top ">

<div class="navbar-inner" id="background">
    <a class="brand" href="@Url.Action("RssIndex", "Home")">
        <img src="~/Images/iconnewzy.png" alt="Newzy" ></a>

         <ul class="nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i>
                            <label style="display: inline; cursor: pointer;" id="friendsId">Friends</label><b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <a href="#" class="btn btn-mini btn-primary" onclick="AddFriend()" style="width: 50%; white-space: nowrap; color: white; margin-left: 20px !important;">Add Friend</a>
                            <a href="#" class="btn btn-mini btn-primary" onclick="ViewFriends()" style="width: 50%; white-space: nowrap; color: white; margin-left: 20px !important;">View Friends</a>
                        </ul>

                    </li>
                    <b style="vertical-align: bottom !important; color: white">Hello, <a href="#" onclick="createManageModal()" style="color: white !important; vertical-align: bottom !important;">@User.Identity.Name</a>!</b>
                    @Html.ActionLink("Log off", "LogOff", "Account", routeValues: null, htmlAttributes: new { @class = "btn btn-mini btn-primary" })
         </ul>
 </div>
 </div>

Answer 1

我遇到了同样的问题。我在this article找到了解决方法。基本上，您必须将此代码添加到您的页面：

$(function() {
  // Setup drop down menu
  $('.dropdown-toggle').dropdown();

  // Fix input element click problem
  $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
  });
});

单击导航栏上的其他内容后，无法单击引导导航栏上的下拉列表

1 个答案: