Question

因此在基金会5遇到一些问题在网站示例中，当浏览器调整为移动设备时，导航菜单显示3行和菜单按钮，并在其网站上显示菜单，当我复制粘贴其代码时，单击时我的按钮只是重新加载页面，我该如何解决？什么东西加载不正确？

我在下拉按钮中遇到了类似的问题：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

你有一些问题：

在加载foundation.js

included

您要包含各个插件和foundation.js文件 - 只需要后者（已包含插件）。

你必须initialize基础插件：

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

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

1 个答案: