引导下拉菜单在母版页中不起作用
Posted
技术标签:
【中文标题】引导下拉菜单在母版页中不起作用【英文标题】：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>
【问题讨论】：
【参考方案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 文件运行的东西的冲突。
【讨论】：
以上是关于引导下拉菜单在母版页中不起作用的主要内容，如果未能解决你的问题，请参考以下文章