0

我遇到了 jQuery 版本冲突的问题。

我认为 usingjQuery.noConflict()可以解决我的问题，但事实并非如此。

这是我用作参考的文章

当我完全删除这两个 jQuery 库中的任何一个时，另一个总是可以正常工作。

正如您在下面的代码中看到的，我导入外部 php 文件以避免每个页面上的代码重复。我的计划也是导出 Javascript 代码（放在标题中太多了）。
我想在一页中运行的两个功能是：

我的（不工作）代码：

    <html>
      <head>
        <link href="/malark/general/general.css" rel="stylesheet" type="text/css">
        <link href="home.css" rel="stylesheet" type="text/css">
        <link href="/malark/general/accordion.css" rel="stylesheet" type="text/css">
        <link href="/malark/general/jqdock/stackdock.css" rel="stylesheet" type="text/css">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script>
            jQuery.noConflict();

            $(document).ready(function () {
                    // Stack initialize
                    var openspeed = 300;
                    var closespeed = 300;
                    $('.stack2>img').toggle(function(){
                            var vertical = 0;
                            var horizontal = 0;
                            var $el=$(this);
                            $el.next().children().each(function(){
                                    $(this).animate({top: vertical + 'px', left: horizontal + 'px'}, openspeed);
                                    vertical = vertical + 55;
                                    horizontal = (horizontal+.75)*2;
                            });
                            $el.next().animate({top: '40px', left: '10px'}, openspeed).addClass('openStack')
                               .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
                            $el.animate({paddingBottom: '0'});
                    }, function(){
                            //reverse above
                            var $el=$(this);
                            $el.next().removeClass('openStack').children('li').animate({top: '-33px', left: '-10px'}, closespeed);
                            $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
                            $el.animate({paddingBottom: '35px'});
                    });

                    // Stacks additional animation
                    $('.stack2 li a').hover(function(){
                            $("img",this).animate({width: '56px'}, 100);
                            $("span",this).animate({marginRight: '30px'});
                    },function(){
                            $("img",this).animate({width: '50px'}, 100);
                            $("span",this).animate({marginRight: '0'});
                    });
            });        

        </script>
        <script type="text/javascript" src="/malark/general/jqdock/jquery.jqDock.min.js"></script>
        <script type="text/javascript" src="/malark/general/jqdock/stack-2.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            jQuery.noConflict();
            $(document).ready(function() {
            //accordeon menu 
            // Store variables
            var accordion_head = $('.accordion > li > a'),
            accordion_body = $('.accordion li > .sub-menu');     

            // Open the first tab on load
            accordion_head.eq(0).addClass('active').next().slideDown('normal');

            // Click function
            accordion_head.on('click', function(event) {    
                // Disable header links
                event.preventDefault(); 
                // Show and hide the tabs on click        
                if ($(this).attr('class') !== 'active'){
                    accordion_body.slideUp('normal');
                    $(this).next().stop(true,true).slideToggle('normal');
                    accordion_head.removeClass('active');
                    $(this).addClass('active');
                    }
                    });
            });        
        </script>

        <script type="text/JavaScript" src="home.js"></script>

      </head>
      <body>
        <div id="container">        
            <div id="rightbox">
                <?php include $_SERVER["DOCUMENT_ROOT"]."/malark/general/navigation_user.php" ?>            
            </div>
            <div id="cheader">
                <img src="../images/logo_EB.gif" alt="logo ING EB"/>
                <h2>ING Employee Benefits</h2>                
            </div>
            <div id="csubheader">
                <i>user tips appear here</i>
                <hr class="horizontal_line" />          
            </div>
            <div id="cbody">
                <?php include $_SERVER["DOCUMENT_ROOT"]."/malark/general/stackdock.php" ?>
            </div>
        </div>
      </body>
    </html>

感谢您的建议。

4

1 回答 1

0

这是未经测试的。 

<script> 

     $(document).ready(function () {
        //use your old plug in

     }

</script>


<script src="jquery.1.9.1"></script>

//加载手风琴

<script>


       jq191 = jQuery.noConflict();

        jq191(document).ready(function() {

        }


</script>

...现在 $ 用于旧的 1.3.1 jQuery，而 jq191 用于第二个版本。与您的代码的唯一区别是我认为第一个 noConflict 不相关，并且我使用 jq191 来确保第二个代码块与第二个版本的 jQuery 一起运行。

完全可以做你想做的事。

哦。还包括这两行

 <script type="text/javascript" src="/malark/general/jqdock/jquery.jqDock.min.js"></script>
 <script type="text/javascript" src="/malark/general/jqdock/stack-2.js"></script>

如果它们是使用该版本 jQuery 的插件，则在加载 1.3.2 之后立即加载，即在使用它们的代码块之前。而且我没有看到加载的手风琴 - 在加载第二个版本的 jQuery 之后加载。

——贾斯汀威利

于 2013-08-15T15:53:13.317 回答