Question

我在Joomla实施了zurb的基础。

我已完成此页面所需的所有操作，如第一个示例所示：http://foundation.zurb.com/docs/components/dropdown.html

我还在身体标签

之前添加了这个

    <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的方法'append'：13

未捕获的ReferenceError：Foundation未定义foundation.dropdown.js：183

未捕获的TypeError：对象[object Object]没有方法'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>

Answer 1

我不确定这是导致问题的唯一原因：

你需要在 jQuery之后包含基础。

此脚本：

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

应该在foundation.js之后。所有脚本都应位于页面底部，因此如果您在<body>标记之前插入它，它将无效;但是如果你的脚本在<head>中就会出现。我让它工作here看看。

我认为你不需要mootools / core.js;如果是这样，那么试着摆脱它们，因为它们只会使调试变得更加困难。如果您需要mootools，请将所有$切换到显式jQuery以确保您正在调用jQuery而不是mootools。

下拉菜单无效

1 个答案: