引导下拉菜单在母版页中不起作用答案

【问题标题】：Bootstrap Dropdown Menu not working in Master Page引导下拉菜单在母版页中不起作用
【发布时间】：2016-01-13 04:41:49
【问题描述】：

我的 Bootstrap 下拉菜单无法正常工作。通过不工作，我的意思是，当我单击链接时没有任何反应，没有任何内容下降。我在母版页中创建了导航栏。我也花了半天时间阅读了这里的所有帖子，但我无法让它工作......

我正在 VS2013 Pro 中创建一个应用程序，它在 ASP.NET/C# 4.0 中，我在 Chrome、IE、Firefox 等中尝试过。我还将 JQuery min 与 JQuery main 交换，在顶部尝试过html的底部。我经历了每一个排列。我还检查了每个浏览器中的检查器，看不到任何错误。我已经更改了导航栏的代码，而不是查看可用的帖子，现在我陷入了死胡同。

我在 fiddlr 中检查了我的代码并且它可以工作，但在我的母版页中它根本无法工作。母版代码如下：

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="~/EMS/EMSDefault.master.cs" Inherits="The_SumTechnology_Project.EMS.EMSDefault" %>

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <title>Matt's Test</title>    
     <link href="~/Content/bootstrap.css" rel="stylesheet" />
     <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
    </script>

    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>
</head>

<body style="background-color: transparent;">
    <form id="form1" runat="server">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse">
                        <span class="sr-only">Toggle navigation</span>                    
                    </button>
                    <a class="navbar-brand" style="color: white;">SumTechnology EMS</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                 <div class="collapse navbar-collapse" id="myNav">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown">Sites
                               <b class="caret"></b> 
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Buildings</a>
                        </li>
                        <li>
                            <a href="#">Meters</a>
                        </li>
                        <li>
                            <a href="#">Data</a>
                        </li>
                        <li>
                            <a href="#">Reports</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Account</a>
                        </li>
                        <li>
                            <a runat="server" href="#" title="Manage your account">Log Out</a>
                        </li>
                    </ul>
                </div>
                </div>
                <!-- /.navbar-collapse -->

            <!-- /.container -->
        </nav>

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </form>



    </body>
</html>

【问题讨论】：

标签： asp.net css twitter-bootstrap-3

【解决方案1】：

代码运行良好，我将其粘贴到我正在工作的项目中，并且下拉菜单正常工作。我不知道你为什么打电话

script>
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
    </script>

没有它，下拉菜单仍然有效，请尝试检查页面中是否存在冲突。

【讨论】：

这里的一篇文章说，如果没有额外的 JS 下拉菜单，它将无法工作，我已将其删除，但它仍然无法工作。您对寻找冲突有什么建议吗？
我也刚刚在另一台机器上打开了项目并发布了它，它仍然无法工作，所以它与使用 IIS express 的 VS 构建有关......我认为？
bootstrap 工作在客户端，是纯 css 和 js。

【解决方案2】：

我从不使用

<script>
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
    </script>

事实上，我在没有它的情况下测试了您的代码并且运行良好，你应该看看你是否在调用 bootstrap js 文件，或者 jquery 的版本不兼容

【讨论】：

我有点想不通...您建议以什么方式尝试测试 js 调用...

【解决方案3】：

即使经过测试，我仍然无法找到 JS 无法加载的原因。但由于某种原因，我不断收到以下错误，这可能与构建应用程序时无关：

警告 11 无法解决“Newtonsoft.Json, Version=7.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”和“Newtonsoft.Json, Version=4.5.0.0, Culture=中立，PublicKeyToken=30ad4fe6b2a6aeed”。任意选择“Newtonsoft.Json, Version=7.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”。 SumTechnology 项目

为了解决这个问题，我为页面的 JS 元素使用了 CDN 引用，这已经解决了这个问题。所以这是阻止那些特定 JS 文件运行的东西的冲突。

【讨论】：