0

同じページにファンシーボックスとjqueryアコーディオンがあります。それぞれが独立して機能しますが、一緒には機能しません。どこかで対立があります。私はいくつかのフォーラムと投稿を見てきましたが、修正に適合できません。jquery-uiスクリプトを最初に置くと言う人もいます。それはうまくいきませんでした。関数を1つのスクリプトにまとめると言う人もいます。それはうまくいきませんでした。

これが私のページのヘッドセクションです。

`<head>
`<title>Transportation Business Group</title>
`<meta name="KEYWORDS" content="International business group.">
`<link rel="stylesheet" href="/stylesheets/voglobalstyle.css" type="text/css" media="screen,projection">
`<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen,projection">
`<meta http-equiv="content-type" content="text/html; charset=utf-8">

`<script src="/scripts/jQuery-UI/1.8.17/jquery-ui.js" type="text/javascript"></script>
`<link rel="stylesheet" href="/scripts/jQuery-UI/1.8.17/Content/themes/base/twisty.ui.css"
    type="text/css" media="screen,projection" />
`<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery-1.4.2.min.js"></script>
`<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
`<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.fancybox-1.3.1.js"></script>
`<script src="/scripts/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        /*
        *   Examples - images
        */
        $("#accordion").accordion({
            autoHeight: false,
            navigation: true,
            collapsible: true,
            active: true
        });
        $("a#MikeFormal").fancybox({
            'titleShow': true,
            'titlePosition': 'over',

            'autoScale': false
        });

        $("a#MikeInformal").fancybox({
            'titleShow': true,
            'titlePosition': 'over',

            'autoScale': false
        });



    });
</script>
 </head>

あなたが私に与えることができるどんな助けでもありがたいです。

4

2 に答える 2

0

一部のプラグインには、実用的な理由からダウンロードに jQuery のバージョンが含まれていますが、ロードする必要があるのは 1 つのインスタンス (可能な限り最新バージョン) だけです。さらに、プラグインの前、jQuery UI の前に、jQuery を最初にロードする必要があります。

あなたの場合、jQuery を 2 回、jQuery UI の後にロードしています。単一のインスタンスを使用し、ドキュメント内のプラグインの前に配置します。

また、コード内のどこにも fancybox CSS ファイルをロードしているようには見えません。

于 2012-06-05T17:15:38.900 に答える
0

スクリプトの順序は次のとおりです。

<!-- Jquery must load first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/scripts/jQuery-UI/1.8.17/Content/themes/base/twisty.ui.css"
    type="text/css" media="screen,projection" />
<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="/scripts/jquery/Plugins/fancybox/jquery.fancybox-1.3.1.js"></script>

最新バージョンの jQuery UI で、かなり古いバージョンの jquery コアも使用していることに気付きました。次に気付いたのは、CDN ではなくローカル サーバーから jQuery Core と UI js ファイルを読み込んでいることです。それらをGoogle CDNバージョンに置き換えました。

Fancybox については、 CDNJSからロードすることも検討したいかもしれませんが、今のところそのままにしておきます。

于 2012-06-05T17:19:20.593 に答える