在移动设备上，我的应用有一个折叠菜单选项的导航栏。但是，当我从菜单中选择一个选项然后再次尝试打开导航栏时，它会在关闭之前立即打开。它无法正常打开并最终卡住。这是我的网站布局代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@Page.Title</title>
<!--<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(function ($) {
$("#datepicker").shieldDatePicker({
});
});
</script>
<script type="text/javascript">
$(function () {
$('#Home_Ph').shieldMaskedTextBox({
mask: "(000) 000-0000"
});
$('#Cell_Ph').shieldMaskedTextBox({
mask: "(000) 000-0000"
});
});
</script>
<script type="text/javascript">
$(function () {
$("#DL_or_ID").shieldTextBox({
});
});
</script>
<script type="text/javascript">
$(function () {
$("#Name").shieldTextBox({
});
});
</script>
<script type="text/javascript">
$(function () {
$("#AddressNo").shieldTextBox({
});
});
</script>
<script type="text/javascript">
$(function () {
$("#AddrStName").shieldTextBox({
});
});
</script>
<script type="text/javascript">
$(function () {
$("#AddrStNameEnd").shieldTextBox({
});
});
</script>
<script type="text/javascript">
$(function () {
$("#AddrUnitNumber").shieldTextBox({
});
});
</script>
<style>
.container {
background-image: url("/Content/img/datepicker/s4.png");
background-position: center;
background-repeat: no-repeat;
height: 740px;
}
.top {
padding-top: 290px;
}
#field {
width: 200px;
line-height: 37px;
background-color: #f5f5f5;
opacity: 0.83;
padding: 7px;
margin: 0 auto;
}
</style>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="color:#2C537B;font-weight:normal;background-color:#f5f5f5" class="theme-light">
<header style="color:white;font-weight:normal;background-color:#3B414C">
<div class="content-wrapper" style="color:#2C537B;font-weight:bold;background-color:#143150">
<!--<div class="float-left" style="color:#2C537B;font-weight:bold;background-color:#3C414C">-->
<img src="~/Images/CDWP2.png">
<!-- </div>-->
<div class="float-right" style="color:white;font-weight:bold;background-color:#394a7e">
<section id="login">
<!--
@if (WebSecurity.IsAuthenticated) {
<text>
Hello, <a class="email" href="~/Account/Manage" title="Manage">@WebSecurity.CurrentUserName</a>!
<form id="logoutForm" action="~/Account/Logout" method="post">
@AntiForgery.GetHtml()
<a href="javascript:document.getElementById('logoutForm').submit()">Log out</a>
</form>
</text>
} else {
<ul>
<li><a href="~/Account/Register">Register</a></li>
<li><a href="~/Account/Login">Log in</a></li>
</ul>
}-->
</section>
<!--
<nav>
<ul id="menu">
<li><a href="~/">Home</a></li>
<li><a href="~/About">About</a></li>
<li><a href="~/Contact">Contact</a></li>
</ul>
</nav> -->
</div>
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-static-top navbar-dark bg-primary">
<div class="navbar-brand"><font color="white">TEST</font></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="~/About.cshtml"><font color="white"> Home </font><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="~/test.cshtml"><font color="white"> Test1 </font></a>
</li>
<li class="nav-item">
<a class="nav-link" href="~/test2.cshtml"><font color="white"> Test2 </font></a>
</li>
<li class="nav-item">
<a class="nav-link" href="~/test3.cshtml"><font color="white"> Test3 </font></a>
</li>
</ul>
</div>
</nav>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #3B4B7D;
color: #f5f5f5;
text-align: center;
}
</style>
@RenderSection("Scripts", required: false)
</body>
</html>
这是我的一个页面的代码，其中大部分内容被删除，留下了html标记和脚本：
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Test Page";
}
<head>
<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<style>
.rTable {
display: table;
width: 100%;
}
.rTableRow {
display: table-row;
}
.rTableCell, .rTableHead {
display: table-cell;
padding: 0px 0px;
border: none;
color: #f5f5f5;
text-align: center;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
font-weight: normal;
}
.rTableFoot {
display: table-footer-group;
font-weight: normal;
background-color: #ddd;
}
.rTableBody {
display: table-row-group;
}
.sTable {
display: table;
width: 100%;
}
.sTableRow {
display: table-row;
}
.sTableHeader {
display: table-cell;
color: #394a7e;
background-color: #a9cafa;
padding: 3px 10px;
border: none;
font-weight: normal;
margin: 0 auto;
}
.sTableHead {
display: table-cell;
color: #394a7e;
padding: 3px 10px;
border: none;
font-weight: normal;
}
.sTableCell {
display: table-cell;
color: #394a7e;
padding: 3px 10px;
border: 2px;
border-color: black;
font-weight: normal;
}
.sTableFoot {
display: table-footer-group;
font-weight: normal;
background-color: #ddd;
}
.sTableBody {
display: table-row-group;
}
</style>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<center><font color="#3B4B7D"><h2>Test</h2></font></center><hr />
</body>
</html>
请帮我识别问题！谢谢！