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 控制台的结果...

未捕获的类型错误：无法调用 nullfoundation.min.js:13 的方法“附加”

Uncaught ReferenceError: Foundation is not definedfoundation.dropdown.js:183

未捕获的类型错误：对象 [对象对象] 没有方法“基础”（索引）：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，请全部切换$到显式jQuery以确保您调用的是 jQuery 而不是 mootools。

于 2013-11-06T09:06:11.407 回答