使用单个jQuery版本

Question

我遇到了一些涉及Jquery和导航栏按钮的麻烦。让我解释一下我的问题。所以，我使用Bootstrap创建了一个包含jquery 1.11.2的网站，一切都很顺利，直到我决定使用fancybox创建一个带有一些谷歌地图的灯箱。（我的谷歌Api使用jquery 1.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（具有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>

我感谢你们给我带来的所有帮助：）

Answer 1

使用单个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版本，灯箱和Navbar响应按钮都将使用此版本。

使用两个jQuery版本

如果您确实需要在页面上使用两个版本的jQuery，可以通过jQuery.noConflict()实现。

请参阅此处的示例：

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

Jquery和Navbar按钮

1 个答案:

使用单个jQuery版本

使用两个jQuery版本