Question

我无法让我的Bootstrap下拉菜单工作。不工作我的意思是，当我点击链接时没有任何事情发生，没有任何事情发生。我在主页面中创建了导航栏。我也花了半天的时间阅读这里的所有帖子，我无法让它工作......

我在VS2013 Pro中创建了一个应用程序，它在ASP.NET / C＃4.0中，我在Chrome，IE，Firefox等中尝试过它。我还用JQuery main交换了JQuery min，在顶部尝试了它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>

Answer 1

代码工作正常，我将其粘贴到我正在工作的项目中并且下拉列表正常工作。我不知道你为什么打电话＆LT;

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

如果没有它，下拉列表仍然有效，请尝试检查您是否在页面中发生冲突。

Answer 2

我从不使用

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

事实上，我在没有它的情况下测试了你的代码并且工作得很完美，你应该看看你是否正在调用bootstrap js文件，或者jquery的版本可能不兼容

Answer 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文件运行的冲突。

Bootstrap Dropdown菜单在Master Page中不起作用

3 个答案: