jQuery和导航栏按钮

Question

我一直有涉及jQuery和我的导航栏按钮一些麻烦。 让我解释一下litte更详细的问题。 所以，我犯了一个网站使用引导至极包括jQuery的1.11.2，一切都很好，直到我决定使用的fancybox创建一些谷歌地图的灯箱。 （我的谷歌API使用jQuery 1.7.1），这是当事情开始失败。 我发现我的导航栏响应按钮没有工作jQuery的内部消除1.11.2（我之前禁用），所以我把它再次，但我的地图收藏没有工作 如何我在导航栏使用jquery 1.7.1？我找不到任何代码行。 Here`s我为我的导航栏

<!-- 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（其中有谷歌的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> 

我感谢所有帮助，你们可以给我带来:)

Answer 1

使用单一的jQuery版本

1. 删除此行：

<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()是可能的。

在这里看到一个例子：

Can I use multiple versions of jQuery on the same page?