Foundation 5 Top Navbar 在移动设备上不下拉

Question

所以 Foundation 5 有一些问题 在网站示例上，当浏览器调整大小以移动时，导航菜单显示 3lines 和菜单按钮，在他们的网站上，它的可点击并下拉以显示菜单，当我复制粘贴他们的代码时，点击我的按钮只是重新加载页面， 我该如何解决？是不是加载不正确？

我遇到了与下拉按钮类似的问题：http://foundation.zurb.com/docs/components/dropdown.html

即使我使用从他们的网站粘贴的副本，它也不会下拉并显示内容。

目前正在加载这些：

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">
  <link rel="stylesheet" href="css/style.css?v=1">
  <!-- Modernizr Script for Foundation 5 -->
  <script src="js/vendor/modernizr.js"></script>
  <!-- Foundation Top Bar -->
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation.dropdown.js"></script
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.offcanvas.js"></script>

我的 html 是这样的：

<header>              

<nav class="top-bar" data-topbar="">
      <ul class="title-area">
        <li class="img-wrapper">
          <a href="#"><img src="img/logo.png"></a>
        </li>
        <li class="toggle-topbar menu-icon"><a href="">Menu</a></li>
      </ul>


    <section class="top-bar-section" style="left: 0%;">

        <!-- Right Nav Section -->
        <ul class="right show-for-large-up">
          <li class="active"><a href="#">Right Button Active</a></li>
          <li class="has-dropdown not-click">
            <a href="#">Right Button Dropdown</a>
            <ul class="dropdown"><li class="title back js-generated"><h5><a     href="javascript:void(0)">Back</a></h5></li>
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>

      </section></nav>

   </header>

下拉按钮如下所示：

     <a href="#" data-dropdown="drop1">DROP DOWN BUTTON</a>
     <ul id="drop1" class="f-dropdown" data-dropdown-content>
       <li><a href="#">This is a link</a></li>
       <li><a href="#">This is another</a></li>
       <li><a href="#">Yet another</a></li>
     </ul>

我做错了吗？我没有使用缩小的 js 脚本，我使用的是foundation.js 脚本。

任何帮助将不胜感激。

编辑：发现问题 facepalm 是在页眉而不是页面末尾加载脚本，当它在最后它工作 100% 时。

Answer 1

你有几个问题：

1. 在加载foundation.js之前，jQuery必须是included
2. 您将包含单个插件和 foundation.js 文件 - 仅需要后者（它已包含插件）。

3. 你必须initialize基础插件：

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