0

サイトのヘッド セクションで競合する jquery に少し苦労しています。

ブートストラップjqueryを下に置くと、動作が停止し、特大のDOESが動作するときに問題が発生します。

しかし、それらを交換すると、逆に、特大サイズは機能せず、ブートストラップは機能します。

これは私の現在のヘッドセクションです

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="/css/normalize.css">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/1140.css">
    <link rel="stylesheet" href="/css/ie.css">


    <!-- Bootstrap (for mobile navigation) -->
    <link href="/css/bootstrap.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">

    <!-- supersized sytlesheets -->
    <link rel="stylesheet" href="/css/supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/theme/supersized.shutter.css" type="text/css" media="screen" />

    <script src="js/vendor/modernizr-2.6.1.min.js"></script>


    <!-- supersized scripts (can't go in the bottom as it stops working -->


    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    <!--bootstrap has to go below min jquery for it to work and above supersized-->
    <script src="/js/bootstrap/jquery.js"></script>

    <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
    <script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

bootstrap/jquery.js ファイルを見ると、すべてブロック テキストであるため、理解できません。

誰か解決策はありますか？私はモバイル版のブートストラップのみを使用しているので、480 などの特定の幅で jquery を含める方法はありますか?

ドキュメントの下部にもスクリプトがありますが、これも影響している可能性がありますか??

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>

    <script type="text/javascript" src="js/css3-mediaqueries.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <!-- Bootstrap Scripts -->

    <script src="/js/bootstrap/bootstrap-transition.js"></script>
    <script src="/js/bootstrap/bootstrap-dropdown.js"></script>
    <script src="/js/bootstrap/bootstrap-collapse.js"></script>

    <!-- Bootstrap scripts end -->

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>

基本的には試行錯誤の結果、スーパーサイズがなぜか一番下でうまくいかず、頭のセクションに入る必要があります。そして、ブートストラップが機能する場合、スーパーサイズは機能しません。

これを乗り越える方法と、これを引き起こしている私の頭のセクションで何か間違ったことがある場合は教えてください。

ありがとう

4

0 に答える 0