0

jQuery のバージョンが競合するという問題があります。

を使用すると問題が解決すると思ってjQuery.noConflict()いましたが、そうではありません。

参考にした記事はこちら

2 つの jQuery ライブラリのいずれかを完全に削除すると、もう一方は常に正常に動作します。

以下のコードでわかるように、すべてのページでコードの繰り返しを避けるために、外部の php ファイルをインポートします。私の計画は、Javascript コードもエクスポートすることです (ヘッダーに配置するには多すぎます)。
1 つのページで実行したい 2 つの機能は次のとおりです。

私の（動作していない）コード：

    <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 は 2 番目のバージョン用です。コードとの唯一の違いは、最初の noConflict が関連しているとは思わないことと、jq191 を使用して、コードの 2 番目のブロックが jQuery の 2 番目のバージョンで実行されることを確認したことです。

あなたがやりたいことをすることは完全に可能です。

おー。次の 2 行も含める

 <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の2番目のバージョンがロードされた後にロードします。

――ジャスティン・ワイリー

于 2013-08-15T15:53:13.317 に答える