折叠的菜单不起作用
Posted
技术标签:
【中文标题】折叠的菜单不起作用【英文标题】：Collapsed Menu Not Working 【发布时间】：2018-05-12 21:10:42 【问题描述】：我有一个使用 MVC 和 .NET Core 2 构建的网页。所以这个页面是从 Razor 生成的。
当我在 Visual Studio 中运行页面并缩小页面以使屏幕变窄时，它会折叠菜单，而汉堡菜单会扩展选项。
但是，当它部署到我的网络主机时，菜单停止工作。它会向下折叠，但单击它时不会展开。
有什么想法吗？
网页位于https://www.techsportise.com/Account/Login，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Races - Techsportise - Free race timing for running clubs</title>
<link rel="stylesheet" href="/css/site.min.css?v=kHvJwvVAK1eJLN4w8xygUR3nbvlLmRwi5yr-OuAO90E" />
<link rel="stylesheet" href="/css/bootstrap-united.css" />
<link rel="stylesheet" href="/css/bootstrap-table.css" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/Races"><img src="/img/logoorangesmall.png" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/Home/Help">Help</a></li>
<li><a href="/Home/API">API</a></li>
</ul>
<form method="post" id="logoutForm" class="navbar-right" action="/Account/Logout">
<ul class="nav navbar-nav navbar-right">
<li>
<a title="Races" href="/Races">Your Races</a>
</li>
<li>
<a title="Manage" href="/Manage/Index">Your Account</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-nav">Log out</button>
</li>
</ul>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8B_47xDwuwZKosoOrEvsIEc-7sACUmVXlDOlvKkWFf6tADFpx4HkVTmogPp-MODeiLleKz94PutshRuzq-Hb3iH-iPa86vzlYoBPig4JbC8_9oAWo8qaFCQGK4oXApQW1mmLKNAgFJs2jIJt7a2O8LA6eJiSShT5HxQ-VhHvspwn0YEOS6VoygnYCW331WEpjA" /></form>
</div>
</div>
</nav>
<div class="container body-content">
<h2>Your Races</h2>
<p>
<a href="/Races/Create">New Race</a>
</p>
<form action="/Races" method="post">
<p>
<input type="text" name="searchString">
<input type="submit" value="Filter" />
</p>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8B_47xDwuwZKosoOrEvsIEc-7sACUmVXlDOlvKkWFf6tADFpx4HkVTmogPp-MODeiLleKz94PutshRuzq-Hb3iH-iPa86vzlYoBPig4JbC8_9oAWo8qaFCQGK4oXApQW1mmLKNAgFJs2jIJt7a2O8LA6eJiSShT5HxQ-VhHvspwn0YEOS6VoygnYCW331WEpjA" /></form>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Race Director</th>
<th>Email</th>
<th>Phone Number</th>
<th>Date</th>
<th>Time</th>
<th style="text-align: center">Race Capacity</th>
<th style="text-align: center">Current Entries</th>
<th style="text-align: center">Entries</th>
<th style="text-align: center">Results</th>
<th style="text-align: center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/Races/Details/1">My Race</a></td>
<td>My RD</td>
<td>rd@techsportise.com</td>
<td>01234 567890</td>
<td>04 June 2010</td>
<td>10:00</td>
<td style="text-align: center">500</td>
<td style="text-align: center">10</td>
<td style="text-align: center"><a href="/RaceEntries/List/1">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/1">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/1"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/1"><img src="/img/delete.png" /></a>
</td>
</tr>
<tr>
<td><a href="/Races/Details/2">Andover 10k</a></td>
<td>Matthew Warr</td>
<td>matt@techsportise.com</td>
<td></td>
<td>24 November 2017</td>
<td>09:00</td>
<td style="text-align: center">100</td>
<td style="text-align: center">2</td>
<td style="text-align: center"><a href="/RaceEntries/List/2">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/2">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/2"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/2"><img src="/img/delete.png" /></a>
</td>
</tr>
<tr>
<td><a href="/Races/Details/3">Hampshire Marathon</a></td>
<td>Matthew Warr</td>
<td>matt@techsportise.com</td>
<td></td>
<td>20 January 2018</td>
<td>09:30</td>
<td style="text-align: center">5000</td>
<td style="text-align: center">0</td>
<td style="text-align: center"><a href="/RaceEntries/List/3">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/3">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/3"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/3"><img src="/img/delete.png" /></a>
</td>
</tr>
<tr>
<td><a href="/Races/Details/4">Balksbury Hill Climb</a></td>
<td>Matthew Warr</td>
<td>matt@techsportise.com</td>
<td></td>
<td>22 April 2018</td>
<td>10:00</td>
<td style="text-align: center">12000</td>
<td style="text-align: center">0</td>
<td style="text-align: center"><a href="/RaceEntries/List/4">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/4">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/4"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/4"><img src="/img/delete.png" /></a>
</td>
</tr>
<tr>
<td><a href="/Races/Details/5">Valentines 5k</a></td>
<td>Matthew Warr</td>
<td>matt@techsportise.com</td>
<td></td>
<td>14 February 2018</td>
<td>07:30</td>
<td style="text-align: center">150</td>
<td style="text-align: center">0</td>
<td style="text-align: center"><a href="/RaceEntries/List/5">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/5">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/5"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/5"><img src="/img/delete.png" /></a>
</td>
</tr>
<tr>
<td><a href="/Races/Details/6">Techsportise Half Marathon</a></td>
<td>string</td>
<td>string</td>
<td>string</td>
<td>26 November 2017</td>
<td>04:39</td>
<td style="text-align: center">0</td>
<td style="text-align: center">0</td>
<td style="text-align: center"><a href="/RaceEntries/List/6">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/6">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/6"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/6"><img src="/img/delete.png" /></a>
</td>
</tr>
<tr>
<td><a href="/Races/Details/7">The Elite Race</a></td>
<td>Jon Warr</td>
<td>jon.mark.warr@gmail.com</td>
<td>07734190692</td>
<td>27 November 2017</td>
<td>05:00</td>
<td style="text-align: center">20000</td>
<td style="text-align: center">2</td>
<td style="text-align: center"><a href="/RaceEntries/List/7">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/7">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/7"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/7"><img src="/img/delete.png" /></a>
</td>
</tr>
<tr>
<td><a href="/Races/Details/8">We Love Jodie 10k</a></td>
<td>Jodie Warr
</td><td>jodiewarr@hotmail.com</td>
<td></td>
<td>04 November 2018</td>
<td>11:35</td>
<td style="text-align: center">100</td>
<td style="text-align: center">2</td>
<td style="text-align: center"><a href="/RaceEntries/List/8">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/8">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/8"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/8"><img src="/img/delete.png" /></a>
</td>
</tr>
<tr>
<td><a href="/Races/Details/9">Langport 10k</a></td>
<td>Simon Smith</td>
<td>Sismith1@hotmail.co.uk</td>
<td>07515541144</td>
<td>28 November 2017</td>
<td>07:15</td>
<td style="text-align: center">1</td>
<td style="text-align: center">1</td>
<td style="text-align: center"><a href="/RaceEntries/List/9">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/9">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/9"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/9"><img src="/img/delete.png" /></a>
</td>
</tr>
<tr>
<td><a href="/Races/Details/10">Chilly Hilly</a> </td>
<td>hgkjg</td>
<td>jkhgkjh@kygkjh.com</td>
<td>123</td>
<td>31 December 2017</td>
<td>11:59</td>
<td style="text-align: center">200</td>
<td style="text-align: center">0</td>
<td style="text-align: center"><a href="/RaceEntries/List/10">Entries</a></td>
<td style="text-align: center"><a href="/Results/Details/10">Results</a></td>
<td style="text-align: center">
<a href="/Races/Edit/10"><img src="/img/edit.png" /></a>
<a href="/Races/Delete/10"><img src="/img/delete.png" /></a>
</td>
</tr>
</tbody>
</table>
<hr />
<footer>
<div class="text-right">
<p><a href="/Home/About">About Us</a> | <a href="/Home/Contact">Contact</a> | <a href="/Home/PrivacyPolicy">Privacy Policy</a> | <a href="/Home/Terms">Terms & Conditions</a></p>
</div>
<p>© 2017 - Techsportise</p>
</footer>
</div>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.min.js?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU"></script>
<script src="/js/bootstrap-table.js?v=JatmtP-zNtX22f6CZSAaTAiUbeE_OJM1rvbMenv-t6g"></script>
</body>
</html>
【问题讨论】：
你没有包含 jQuery 如果你打开浏览器的 webdeveloper 工具，它会在控制台中显示 jQuery 没有像@VilleKoo 指出的那样定义的错误。 【参考方案1】：感谢 VilleKoo 和 Orvar，我在源代码中发现在开发环境中包含 jquery，但在生产环境中却没有。我已经添加了。
_layout.cshtml
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="~/js/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
@*<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>*@
<script src="~/js/site.min.js" asp-append-version="true"></script>
<script src="~/js/bootstrap-table.js" asp-append-version="true"></script>
</environment>
【讨论】：
很高兴你把它整理好了:)【参考方案2】：我看不到jQuery文件。你可以尝试添加。
jquery-file.js
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.min.js?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU"></script>
<script src="/js/bootstrap-table.js?v=JatmtP-zNtX22f6CZSAaTAiUbeE_OJM1rvbMenv-t6g"></script>
【讨论】：
以上是关于折叠的菜单不起作用的主要内容，如果未能解决你的问题，请参考以下文章
导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用
jquery 和 bootstrap 导航栏在 Angular 7 中折叠或展开子菜单的布局中不起作用