Javascript 第四模式是否阻止导航栏下拉菜单工作？
我在导航栏中有一个带有下拉菜单的页面&页面上其他地方有4个模态。 由于某种原因，我添加了第四个模式后，下拉菜单停止运行。 如果我删除第四个模式，下拉菜单工作正常。 如何使所有4个模态和下拉菜单工作？ 感谢您的帮助 链接到Modals工作但不使用下拉菜单的示例： 链接到已删除第四个模式（邮件列表btn）的示例并使用下拉菜单：Javascript 第四模式是否阻止导航栏下拉菜单工作？,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我在导航栏中有一个带有下拉菜单的页面&页面上其他地方有4个模态。 由于某种原因，我添加了第四个模式后，下拉菜单停止运行。 如果我删除第四个模式，下拉菜单工作正常。 如何使所有4个模态和下拉菜单工作？ 感谢您的帮助 链接到Modals工作但不使用下拉菜单的示例： 链接到已删除第四个模式（邮件列表btn）的示例并使用下拉菜单： 餐厅 .身体模态{ } 函数MM_preload images（）{//v3.0 var d=document；if（d.images）{if（！d.MM_p）d.MM_p
餐厅
.身体模态{
}
函数MM_preload images（）{//v3.0
var d=document；if（d.images）{if（！d.MM_p）d.MM_p=new Array（）；
变量i，j=d.MM\u p.length，a=MM\u.arguments；for（i=0；i
-
&时代；
加入电子邮件列表
接收有关特价、优惠券和活动的信息和更新
另外，您的信息将严格保密
名称
电子邮件
发送！关闭
&时代；
早餐菜单
接近
&时代；
午餐菜单
接近
&时代；
晚餐菜单
接近
@字符集“UTF-8”；
h1，h3，p{
文本对齐：居中；
}
.图像填充{
宽度：100%；
}
#包装纸{
右边填充：0px；
左侧填充：0px；
背景重复：重复；
}
#主要{
宽度：100%；
左边距：自动；
右边距：自动；
边际上限：0px；
边缘底部：60px；
字号：中等；
背景色：#FFFFFF；
}
.navbar.navbar-default{
边框宽度：0px；
边界半径：0px；
背景色：#bfbf；
边际上限：0px；
边缘底部：0px；
}
#导航集装箱{
背景色：#bfbf；
盒影：0px 0 10px；
位置：相对位置；
z指数：8；
-webkit盒阴影：0px 0 10px；
}
.菜单顶部{
显示：无；
}
.glyphicon.glyphicon-home{
字体大小：16px；
}
#导航主页{
字体大小：20px；
}
#导航室{
字体大小：20px；
}
#导航餐厅{
字体大小：20px；
}
#导航条{
字体大小：20px；
}
#导航更多{
字体大小：20px；
}
.活动文本{
字体大小：20px；
}
a:链接{
颜色：#FFFFFF；
文字装饰：无；
}
a:悬停{
颜色：#CFF879；
文字装饰：无；
}
a:参观了{
颜色：#FFFFFF；
文字装饰：无；
}
.导航簿{
背景色：#73a014；
背景图像：-webkit线性梯度（270度，rgba（154199,60,1.00）0%，rgba（115160,20,1.00）86.53%）；
背景图像：-莫兹线性梯度（270度，rgba（154199,60,1.00）0%，rgba（115160,20,1.00）86.53%）；
背景图像：-o-线性梯度（270度，rgba（154199,60,1.00）0%，rgba（115160,20,1.00）86.53%）；
背景图像：线性梯度（180度，rgba（154199,60,1.00）0%，rgba（115160,20,1.00）86.53%）；
文本对齐：居中；
}
.navbar默认值.navbar nav.nav book>a，
.navbar默认值.navbar nav.nav book>a:焦点{
颜色：#cff879；
字体大小：20px；
字体系列：Gotham，“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：粗体；
}
.navbar默认值.navbar nav.nav book>a:悬停，
.navbar默认值.navbar nav.nav book>a:活动，
.navbar默认值.navbar nav.nav-book.active>a，
.open.dropdown-toggle.nav-book{
颜色：#73a014；
字体大小：20px；
字体系列：Gotham，“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：粗体；
背景色：#cff879；
背景图像：-webkit线性梯度（270度，rgba（157219,29,1.00）0%，rgba（207248121,1.00）54.92%）；
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Restaurant</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.body-modal {
}
</style>
<link href="modals.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>
<body>
<div class="container-fluid" id="wrapper">
<div class="container-fluid" id="nav-container">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><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 menu-top" href="#">Menu <span class="glyphicon glyphicon-hand-right"></span></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav navbar-right">
<li id="nav-home"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li id="nav-rooms"><a href="rooms.html">Rooms</a></li>
<li class="active active-text"><a href="restaurant.html">Restaurant</a></li>
<li id="nav-bar"><a href="bar.html">Bar</a></li>
<li class="dropdown" id="nav-more"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">More<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="gallery.html">Gallery/Tour</a></li>
<li><a href="#">About/History</a></li>
<li><a href="#">Functions</a></li>
<li><a href="#">Gift Shop</a></li>
</ul>
</li>
<li id="nav-gallery"><a href="gallery.html">Gallery/Tour</a></li>
<li id="nav-about"><a href="#">About/History</a></li>
<li id="nav-functions"><a href="#">Functions</a></li>
<li id="nav-giftshop"><a href="#">Gift shop</a></li>
<li class="nav-book" id="nav-book"><a href="reserve.html">RESERVE NOW</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="container main-background">
<article id="main"><br>
<div class="row menu-buttons">
<div class="col-lg-4 col-md-4 col-sm-4 breakfast-menu">
<p> <a href="#breakfastModal" role="button" class="btn btn-primary menu-btn" type="button" data-toggle="modal">Breakfast Menu</a> </p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 lunch-menu">
<p> <a href="#lunchModal" role="button" class="btn btn-primary menu-btn" type="button" data-toggle="modal">Lunch Menu</a> </p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<p> <a href="#dinnerModal" role="button" class="btn btn-primary menu-btn" type="button" data-toggle="modal">Dinner Menu</a> </p>
</div>
</div>
</article>
</div>
<div class="container-fluid footer-full">
<div class="container footer-container">
<footer>
<div class="row" id="footer-row">
<div class="col-sm-4 footer-rightcolumn">
<div class="footer-mailinglist"><p><a href="#myModal" role="button" class="btn btn-default maillist-btn" type="button" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span> Join the Mailing List!</a></p></div>
</div>
</div>
<div class="row footer-links-row"> </div>
</footer>
</div>
</div>
</div>
<!-- Begin E-Mail List Modal(MyModal) - jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Join the E-Mail List</h4>
</div><!-- end modal-header -->
<div class="modal-body">
<p>Receive info & updates about Specials, Coupons & Events.</p>
<hr>
<p><small class="text-muted">PS. Your info will be kept in strict confidence.</small></p>
<form class="form-horizontal" method="post" action="http://www.fatcow.com/scripts/formemail.bml">
<input type="hidden" name="my_email" value="john@somewhere.com" />
<input type="hidden" name="subject" value="Join the Mailing List" />
<input type="hidden" name="required" value="fullname,emailaddress" />
<div class="form-group">
<label class="col-lg-2 control-label" for="fullname">Name</label>
<div class="col-lg-10">
<input class="form-control" type="text" id="fullname" name="fullname" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="emailaddress">E-Mail</label>
<div class="col-lg-10">
<input class="form-control" type="text" id="emailaddress" name="emailaddress" placeholder="you@somewhere.com">
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button class="btn btn-success pull-right" type="submit" name="submit" value="Submit">Send!</button> <button class="btn btn-default pull-right close-button" data-dismiss="modal" type="button">Close</button>
</div>
</div>
<input type="hidden" name="thankyou_url" value="http://www.buzzpunchmedia.com/kuyaba/index.html" />
</form>
</div><!-- end modal-body -->
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end myModal -->
<!-- Begin Breakfast Modal - jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<div class="modal fade" id="breakfastModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Breakfast Menu</h4>
</div><!-- end modal-header -->
<div class="modal-body modalimage-center"> <br>
<div class="modal-footer"><div class="col-lg-12">
<button class="btn btn-default pull-right close-button" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div><!-- end modal-body -->
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end breakfast Modal -->
<!-- Begin Lunch Modal - jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<div class="modal fade" id="lunchModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Lunch Menu</h4>
</div><!-- end modal-header -->
<div class="modal-body"> <br>
<div class="modal-footer"><div class="col-lg-12">
<button class="btn btn-default pull-right close-button" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div><!-- end modal-body -->
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end Lunch Modal -->
<!-- Begin Dinner Modal - jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<div class="modal fade" id="dinnerModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Dinner Menu</h4>
</div><!-- end modal-header -->
<div class="modal-body"> <br>
<div class="modal-footer"><div class="col-lg-12">
<button class="btn btn-default pull-right close-button" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div><!-- end modal-body -->
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end Dinner Modal -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
</html>
@charset "UTF-8";
h1, h3, p {
text-align: center;
}
.image-fill {
width: 100%;
}
#wrapper {
padding-right: 0px;
padding-left: 0px;
background-repeat: repeat;
}
#main {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 60px;
font-size: medium;
background-color: #FFFFFF;
}
.navbar.navbar-default {
border-width: 0px;
border-radius: 0px;
background-color: #BFBFBF;
margin-top: 0px;
margin-bottom: 0px;
}
#nav-container {
background-color: #BFBFBF;
box-shadow: 0px 0 10px;
position: relative;
z-index: 8;
-webkit-box-shadow: 0px 0 10px;
}
.menu-top {
display: none;
}
.glyphicon.glyphicon-home {
font-size: 16px;
}
#nav-home {
font-size: 20px;
}
#nav-rooms {
font-size: 20px;
}
#nav-restaurant {
font-size: 20px;
}
#nav-bar {
font-size: 20px;
}
#nav-more {
font-size: 20px;
}
.active-text {
font-size: 20px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #CFF879;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
.nav-book {
background-color: #73a014;
background-image: -webkit-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
background-image: -moz-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
background-image: -o-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
background-image: linear-gradient(180deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
text-align: center;
}
.navbar-default .navbar-nav .nav-book > a,
.navbar-default .navbar-nav .nav-book > a:focus {
color: #cff879;
font-size: 20px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
}
.navbar-default .navbar-nav .nav-book > a:hover,
.navbar-default .navbar-nav .nav-book > a:active,
.navbar-default .navbar-nav .nav-book.active > a,
.open .dropdown-toggle.nav-book {
color: #73a014;
font-size: 20px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #cff879;
background-image: -webkit-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
background-image: -moz-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
background-image: -o-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
background-image: linear-gradient(180deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
}
#nav-giftshop {
display: none;
}
#nav-gallery {
display: none;
}
#nav-functions {
display: none;
}
#nav-about {
display: none;
}
.main-background {
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.menu-buttons {
margin-top: 60px;
}
.menu-btn, .menu-btn:focus {
background-color: #73a014;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 16px;
border-radius: 5px;
border-left-color: #73a014;
border-right-color: #73a014;
border-top-color: #73a014;
color: #FFFFFF;
width: 80%;
border-bottom-width: 0px;
-webkit-box-shadow: 3px 3px 8px #464646;
box-shadow: 3px 3px 8px #464646;
border-style: none;
outline: none;
}
.menu-btn:hover, .menu-btn:active, .menu-btn.active, .open .dropdown-toggle.menu-btn {
background-color: #403C3C;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 16px;
border-radius: 5px;
border-left-color: #73a014;
border-right-color: #73a014;
border-top-color: #73a014;
color: #FFFFFF;
width: 80%;
border-bottom-width: 0px;
-webkit-box-shadow: 1px 1px 2px #464646;
box-shadow: 1px 1px 2px #464646;
outline: none;
}
.footer-full {
background-color: #403C3C;
-webkit-box-shadow: inset -20px 10px;
box-shadow: inset -20px 10px;
position: relative;
z-index: 14;
margin-top: 0px;
padding-top: 0px;
margin-bottom: 0px;
bottom: 0px;
}
.footer-container {
margin-top: 15px;
margin-bottom: 20px;
}
.footer-rightcolumn {
padding-left: 50px;
}
.footer-mailinglist {
}
.maillist-btn, .maillist-btn:focus {
background-color: #DDDDDD;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-radius: 5px;
border-left-color: #73a014;
border-right-color: #73a014;
border-top-color: #73a014;
color: #73a014 !important;
width: 78%;
border-bottom-width: 0px;
-webkit-box-shadow: 3px 3px 8px #464646;
box-shadow: 3px 3px 8px #464646;
outline: none;
float: left;
clear: both;
}
.maillist-btn:hover, .maillist-btn:active, .maillist-btn.active, .open .dropdown-toggle.maillist-btn {
background-color: #73a014;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-radius: 5px;
border-left-color: #73a014;
border-right-color: #73a014;
border-top-color: #73a014;
color: #FFFFFF !important;
width: 78%;
border-bottom-width: 0px;
-webkit-box-shadow: 1px 1px 2px #464646;
box-shadow: 1px 1px 2px #464646;
outline: none;
float: left;
clear: both;
height: auto;
}
.modalimage-center {
margin-left: auto;
margin-right: auto;
padding-left: auto;
padding-right: auto;
text-align: center;
}
.image-center {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.print-button {
margin-right: 15px;
}
.close-button {
margin-right: 15px;
}
<!-- Begin Dinner Modal - jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>