我在 jQuery 和我的导航栏按钮方面遇到了一些麻烦。 让我更详细地解释一下我的问题。 因此,我使用包含 jquery 1.11.2 的 Bootstrap 创建了一个网站,一切都很顺利,直到我决定使用 fancybox 创建一个带有一些谷歌地图的灯箱。 (我的 Google API 使用 jquery 1.7.1),这是事情开始失败的时候。
我注意到我的 Navbar 响应按钮在 whiteout jquery 1.11.2(我之前禁用过)中不起作用,所以我再次放置它,但我的 map 灯箱不起作用。
如何在我的导航栏中使用 jquery 1.7.1?我找不到任何代码行。 这是我的导航栏代码
<!-- Home -->
<section class="header" id="header">
<nav class="navbar navbar-default" id="navigation-bar">
<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="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="http://www.ecomotor.cl">Ecomotor</a>
</div> <!-- /.navbar-header -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#header">Inicio</a></li>
<li><a href="#service">Despacho</a></li>
<li><a href="#portfolio">Galeria</a></li>
<li><a href="#about">Acerca de</a></li>
<li><a href="#contact">Contacto</a></li>
</ul> <!-- /.nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
下面是使用的js(有google API)
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- FancyBox -->
<script src="assets/js/fancybox/jquery.fancybox.js"></script>
<script src="assets/js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="assets/js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="assets/js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="assets/js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none'
});
});
</script>
<script src="assets/js/jquery-1.11.2.min.js"></script>(if I delete this line, my maps work perfectly but not my navbar button, the opposite happens if I keep it)
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/contact.js"></script>
<script src="assets/js/script.js"></script>
最佳答案
使用单一的 jQuery 版本
- 删除这一行:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- 删除这一行:
<script src="assets/js/jquery-1.11.2.min.js"></script>
- 将此行放在所有其他
<script>
之前标签:
<script src="assets/js/jquery-1.11.2.min.js"></script>
这样,您的页面上将只有一个 jQuery 版本,灯箱和导航栏响应按钮都将使用该版本。
使用两个 jQuery 版本
如果您确实需要在页面上使用两个版本的 jQuery,可以通过 jQuery.noConflict()
实现。 .
看这里的例子:
关于jQuery 和导航栏按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35694202/