单击导航栏上的其他内容后，无法单击引导导航栏上的下拉菜单答案

【问题标题】：Can't click on dropdown on bootstrap navbar after something else on navbar has been clicked单击导航栏上的其他内容后，无法单击引导导航栏上的下拉菜单
【发布时间】：2013-03-08 21:46:33
【问题描述】：

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

<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>

【问题讨论】：

html 代码在我看来没问题，它可能是您在下拉菜单中调用的 onclick 事件。您是否尝试过调试代码。您的浏览器的开发人员工具中是否有任何错误正在使用吗？
嗨夏尔马，感谢您的回复。我已经在 javascript 控制台中对其进行了调试，它没有报告任何错误，所以我假设 html 是正确的。我认为这与我的模态框有关。当我点击它们时，它开始在导航栏上给我带来问题。现在我在模态框中注入实际视图。会是这样吗？也许他们需要部分视图？

标签： asp.net-mvc html twitter-bootstrap

【解决方案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();
  });
});

【讨论】：