1

Joomla に zurb の基盤を実装しました。

最初の例で示されているように、このページで必要なすべてのことを行いました: http://foundation.zurb.com/docs/components/dropdown.html

また、bodyタグの直前にこれを追加しました

    <script>
     $(document).foundation();
    </script>

まだ機能していません。

なぜだろう...

編集

この問題を解決するために提供できるその他の情報を教えてください。正直なところ、なぜそれが機能しないのか途方に暮れています。

/編集

ソース コードに表示されるファイルは次のとおりです。これは、何らかの競合が原因で発生したのでしょうか?

      <link rel="stylesheet" href="/social/services/templates/testingdifferentversion8/css/normalize.css" type="text/css" />
      <link rel="stylesheet" href="/social/services/templates/testingdifferentversion8/css/foundation.css" type="text/css" />
       <script src="/social/services/media/system/js/mootools-core.js" type="text/javascript"></script>
       <script src="/social/services/media/system/js/core.js" type="text/javascript"></script>
       <script src="/social/services/media/system/js/caption.js" type="text/javascript"></script>
       <script src="/social/services/templates/testingdifferentversion8/js/foundation.min.js" type="text/javascript"></script>
       <script src="/social/services/templates/testingdifferentversion8/js/foundation.dropdown.js" type="text/javascript"></script>
      <script type="text/javascript">
              window.addEvent('load', function() {
              new JCaption('img.caption');
        });
     </script>

   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

   <script type="text/javascript">
       $(document).ready(function(){
       $( ".button-group li a" ).addClass( "button" );
       $( ".readmore").addClass("small button");
       $( ".menubottom-menu li").addClass("inline-list left");   
       $( ".programs" ).attr( 'data-dropdown','drop1' );
       $( ".small").addClass("f-dropdown");
       $( ".small").attr('id', 'drop1');
       $( ".f-dropdown").attr('data-dropdown-content', '');
      });
  </script>

編集2

JavaScriptのコンソールの結果を投稿しています...

キャッチされていないTypeError:nullのfoundation.min.js:13のメソッド「append」を呼び出すことはできません

Uncaught ReferenceError: Foundation が定義されていませんfoundation.dropdown.js:183

キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にはメソッド 'foundation' (インデックス) がありません:253

また、$() から jQuery() への変換について誤解がある場合に備えて:

      <script type="text/javascript">
           jQuery(document).ready(function(){
              jQuery( ".button-group li a" ).addClass( "button" );
              jQuery( ".readmore").addClass("small button");
              jQuery( ".menubottom-menu li").addClass("inline-list left");   
              jQuery( ".programs" ).attr( 'data-dropdown','drop1' );
              jQuery( ".small").addClass("f-dropdown");
              jQuery( ".small").attr('id', 'drop1');
              jQuery( ".f-dropdown").attr('data-dropdown-content', '');
              jQuery( "li .item-107 a").removeClass("button");
          });
        </script>
4

1 に答える 1

1

これがあなたの問題の唯一の原因であるかどうかはわかりません：

  1. jQueryの後にファンデーションを含める必要があります。

  2. このスクリプト:

    <script>
   jQuery(document).foundation();
</script>

    foundation.js の後にある必要があります。すべてのスクリプトはページの下部にある必要があるため、<body>タグの前に挿入すると機能しません。ただし、スクリプトが にある場合はそうなります<head>。私はそれをここで見てみましょう。

  3. mootools/core.js は必要ないと思います。もしそうなら、それらはデバッグをより困難にするだけなので、それらを取り除くようにしてください. mootools が必要な場合は、すべて$を明示的に切り替えて、mootools ではjQueryなく jQuery を呼び出していることを確認してください。

于 2013-11-06T09:06:11.407 に答える