jQuery和导航栏按钮

jQuery和导航栏按钮,jquery,html,css,twitter-bootstrap,navbar,Jquery,Html,Css,Twitter Bootstrap,Navbar,我在jQuery和导航栏按钮方面遇到了一些问题。 让我更详细地解释一下我的问题。 因此,我使用Bootstrap创建了一个站点,其中包括jQuery1.11.2,一切都很顺利,直到我决定使用fancybox创建一个带有谷歌地图的lightbox。(我的GoogleAPI使用jQuery1.7.1),这是事情开始失败的时候 我注意到我的Navbar响应按钮在忽略jquery 1.11.2(我之前禁用了它)的情况下不起作用,所以我重新放置了它,但我的地图灯箱不起作用 如何在导航栏中使用jquery

我在jQuery和导航栏按钮方面遇到了一些问题。 让我更详细地解释一下我的问题。 因此,我使用Bootstrap创建了一个站点,其中包括jQuery1.11.2,一切都很顺利,直到我决定使用fancybox创建一个带有谷歌地图的lightbox。(我的GoogleAPI使用jQuery1.7.1),这是事情开始失败的时候

我注意到我的Navbar响应按钮在忽略jquery 1.11.2(我之前禁用了它)的情况下不起作用,所以我重新放置了它,但我的地图灯箱不起作用

如何在导航栏中使用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(它有GoogleAPI)


window.jQuery | | document.write(“”)
$(文档).ready(函数(){
$(“.Variable”).fancybox({
最大宽度:800,
最大高度:600,
菲托维:错,
宽度:“70%”,
身高:70%,
自动调整大小:false,
closeClick:false,
openEffect:'弹性',
近距离效应:“无”
});
});
(如果我删除这一行,我的地图工作正常,但导航栏按钮不工作,如果我保留它,情况正好相反)
使用单个jQuery版本
  • 删除此行:
  • 删除此行:
  • 将此行置于所有其他
    标记之前:
  • 这样,页面上只有一个jQuery版本,lightbox和Navbar响应按钮都将使用这个版本

    使用两个jQuery版本 如果您确实需要在页面上使用两个版本的jQuery,可以通过

    请参见此处的示例:


    如果删除此行,会发生什么情况<代码>Maps lightbox不起作用您的第一个jQuery导入是旧版本(1.7.1)。这可能是问题所在吗?试试1.11因为谷歌API,我不得不在地图上使用这个版本,不管怎样,我试过了,只有我的导航栏可以工作,而不是我的lightbox。我这样做了,我的lightbox(可能是因为这一行有什么方法我可以在我的页面上同时使用它们?我应该把jQuery.noConflict()放在哪里?
        <!-- 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>