【发布时间】：2016-07-25 13:06:27
【问题描述】：
我知道折叠的切换导航按钮在 Stackoverflow 上存在很大问题。我在构建三个网站时遇到了同样的问题，并且我使用相同的 html 顺序，尤其是导航栏......并且切换按钮不想响应我给它的点击。我正在使用来自http://getbootstrap.com/getting-started/ 的 jQuery v1.11.2、编译和缩小的 CSS、JavaScript 和字体引导程序。我想知道的是，JQuery 版本与引导程序和 JQuery 之间的代码兼容性有关吗？我的“UN-WORKING”导航栏切换按钮代码如下：
<!DOCKTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="en">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="Bootstrap-three/CSS/bootstrap-theme.min.css" rel="stylesheet">
<link href="Bootstrap-three/CSS/bootstrap.min.css" rel="stylesheet">
<link href="Bootstrap-three/CSS/bootstrap.icon-large.min.css" rel="stylesheet">
<script src="Assets/modernizr-custom.js" rel="stylesheet"></script>
<link href="Assets/normalize.css" rel="stylesheet">
<link href="Assets/Animate.css" rel="stylesheet">
<link href="CSS/Styles.css" rel="stylesheet">
</head>
<body>
<div class="background">
<!-- <img src="images/img/abstract-artistic-HD-wallpapers.jpg" class="" alt=""> -->
</div>
<div class="Container">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="Container">
<!--type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target="collapse" data-target="#navigate" type="button" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand flip">
<a href="#" class="front"><img src="images/dsg/logo-n.png" height="60px" width="inherit" alt="logo"></a>
<a href="#" class="back" style="margin: 0px 15px;"><img src="images/dsg/logo-b.png" height="60px" width="inherit" alt="logo"></a>
</div> <!---->
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse pull-right" id="my-nav-items">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Departments</a></li>
<li><a href="#">Contact us</a></li>
<!-- <button class="btn btn-default" type="button"> <strong class="glyphicon glyphicon-search"></strong></button> -->
</ul>
</div>
</div>
<div class="misc-links">
<div class="container">
<div class="pull-right" style="padding: 5px;">
<img src="images/ico/facebook.png" class="hover-img" alt="Like us on Facebook"><img src="images/ico/instagram.png" class="hover-img" alt="Follow us on Instagram"><img src="images/ico/twitter.png" class="hover-img" alt="Follow us on Twitter">
</div>
</div>
</div>
</nav>
</div>
<!-- faster load tie -->
<script src="jQuery/jquery.min.js" type="text/javascript"></script>
<script src="jQuery/jquery.jcarousel.min.js" type="text/javascript"> </script>
<script src="Bootstrap-three/JS/bootstrap.min.js" type="text/javascript"></script>
<script src="Bootstrap-three/JS/bootstrap.js" type="text/javascript"></script>
<script src="Bootstrap-three/JS/npm.js" type="text/javascript"></script>
<script src="Javascript/Script.js" type="text/javascript"></script>
<script src="Bootstrap-three/JS/bootstrap-modal.js" type="text/javascript"></script>
<script src="smooth-scroll/SmoothScroll.js" type="text/javascript"></script>
</body>
</html>
自定义嵌入CSS样式如下：
<style>
body a {
color: #2b2b2b;
}
body a:hover {
color: #fff;
text-decoration: none;
}
nav {
min-height: 100px;
background: #fff;
color: #000;
padding: 0;
margin: 0;
}
nav a:hover {
color: orange;
text-decoration: none;
}
.navbar-toggle {
background: cadetblue;
color: #fff;
}
footer {
background: #fff;
color: #000;
vertical-align: middle;
}
.container {
background: transparent;
}
body a: hover {
color: white;
background: black;
}
.social-login-strip {
width: 100%;
height: inherit;
background: #222;
color: white;
border-bottom: #000 thick solid;
}
.social-login-strip a {
color: white;
text-decoration: none;
}
.social-login-strip a:hover {
color: white;
text-decoration: none;
}
.white {
padding: 20px 0px;
color: #000;
background: #fff;
min-height: 100px;
}
.icon-bar {
background: white;
}
.cari {
min-height: 500px;
height: inherit;
top: 80px;
background: transparent;
color: white;
}
.cari a {
color: white;
}
.cari a:hover {
color: azure;
}
.sector {
min-height: 600px;
background: #222;
color: white;
}
.background {
max-width: 100%;
max-height: 100%;
position: fixed;
z-index: -9999;
background-size: contain;
}
#d-strip {
min-height: 60px;
background: url("images/img/6933687-abstract-artistic-art.jpg");
background-size: cover;
}
.misc-links {
height: 30px;
background-color: orange;
}
.space {
top: 0;
left: 0;
max-height: 100%;
min-width: 100%;
background: white;
}
.banner-prop {
max-height: auto;
max-width:100% ;
}
.centering {
padding: 5% 0;
}
.child-centering {
padding: 10% 0;
}
.strip {
min-height: 30px;
background: url("images/img/HD-Painting-Wallpaper-Desktop-Background-1.jpg");
}
.constrain {
max-height: 500px;
max-width: inherit;
}
.caption-blok {
min-height: 30px;
background: #2b2b2b;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #fff;
padding: 2px 5px;
}
.divide {
background: transparent;
min-height: 200px;
}
#linker {
background-color: cadetblue;
min-height: 300px;
width: 100%;
color: white;
opacity: 0.9;
-webkit-opacity: 0.9;
}
.bgbgor {
background: orange;
}
#sign-up {
border: #2b2b2b medium solid ;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.marg-min {
margin: 20px;
}
</style>
请帮忙，因为发布的许多解决方案都不适用于我的代码。谢谢你。
【问题讨论】：
标签： jquery html twitter-bootstrap responsive-design navbar