我遇到Bootstrap切换菜单功能和MVC的问题。 我的基本布局有脚本和菜单都很好 - 但如果我在移动视图中使用切换功能它适用于当前页面一次，之后其他页面点击它没有任何反复发生..
通过将菜单移动到局部视图并将其包含在每个页面的底部而不仅仅是在主要布局中，我几乎绕过它，但是这个问题然后被反转，它适用于所有页面，直到我点击F5 - 然后又停止工作了吗？
布局：
@{
ViewData["Logo"] = "bird.png";
ViewData["Icon"] = "cascade.ico";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="Robots" content="noindex" />
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta HTTP-EQUIV="EXPIRES" CONTENT="0">
<title>@ViewBag.SiteTitle</title>
<link rel="icon" type="image/x-icon" href="~/img/@ViewBag.Icon" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<environment names="Development">
<!-- Dev uses full file versions for de-bugging -->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</environment>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/styles/all/all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="~/Styles/Mobile/mobile.css" media="only screen and (max-width: 481px)" />
<link rel="stylesheet" type="text/css" href="~/Styles/Desktop/desktop.css" media="only screen and (min-width: 481px)" />
<script src="~/app.js"></script>
<link href="~/Styles/Print.css" rel="stylesheet" media="print"/>
@RenderSection("Scripts", false)
</head>
<body>
<div id="mypage" data-role="page">
<div id = "header" data-role="header" data-id="persistent" data-position="fixed">
<div id="headnav" class="navbar navbar-inverse">
<div id="headercontainer" class="container">
<div style="position:relative; z-index:10" class="pull-left" rel="home" href="#" title="@ViewBag.SiteTitle">
<a href="@Url.Action("Index", "App")" title="Home">
<img style="max-width:100px; max-height: 100px; margin-top: 5px"
src="~/img/@ViewBag.Logo">
</a>
</div>
<div class="navbar navbar-text" >
<h3 class="title">@ViewBag.Title</h3>
<h5 class="subtitle">@ViewBag.SubTitle</h5>
</div>
<!-- Logout Box -->
<div class="pull-right">
@await Component.InvokeAsync("Logout")
</div>
</div>
</div>
</div>
<!-- content -->
<div id="maincontent" data-role="content" class="container">
@RenderBody()
</div>
@Html.Partial("_NavigationFooter")
</div>
<!-- overriding customer styles -->
<link href="~/styles/customstyles.css" rel="stylesheet" />
<script type="text/javascript">
</script>
</body>
</html>
页脚部分：
@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<footer id="pagefooter" data-id="persistent" data-position="fixed">
<div id="mobilefooterheight" class="navbar navbar-inverse navbar-fixed-bottom">
<div id="footercontainer" class="container-fluid">
<div class="navbar-collapse collapse" id="footer-body">
<ul class="nav navbar-nav">
<li><a data-transition="slide" href="@Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
<li><a data-transition="slide" href="@Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
<li><a data-transition="slide" href="@Url.Action("Index", "Holidays")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
<li><a data-transition="slide" href="@Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
<li><a data-transition="slide" href="@Url.Action("Index", "Tasks")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
<li><a data-transition="slide" href="@Url.Action("Index", "Request")"><img src="~/img/icons/authorise.png" />Requests</a></li>
</ul>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" aria-expanded="false" data-toggle="collapse" data-target="#footer-body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@*<ul class="footer-bar-btns visible-xs">
<li><a data-transition="slide" href="@Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
<li><a data-transition="slide" href="@Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
<li><a data-transition="slide" href="@Url.Action("Index", "Holidays")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
<li><a data-transition="slide" href="@Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
<li><a data-transition="slide" href="@Url.Action("Index", "Tasks")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
<li><a data-transition="slide" href="@Url.Action("Index", "Request")"><img src="~/img/icons/authorise.png" />Requests</a></li>
</ul>*@
</div>
</div>
</div>
</footer>
在目前的这种形式中，我已经将代码放回到页脚，只是在所有页面使用的布局中，这是我的偏好。但任何人都可以解释为什么系统在第一次使用后或者我一般导航到另一个页面时都无法切换。 F5更正它，然后使用菜单它会在下一页停止工作，除非我点击F5。
我确定它与我的脚本没有加载到RenderBody上的引导程序或者那种效果但找不到修复。