Foundation 5 顶栏不下拉

Question

已经阅读了很多关于此的主题，但似乎没有任何效果。

刚开始一个项目，我从基础文档站点虚拟复制/粘贴了代码，但它不起作用。

这是我的 html 测试

<body>
   <header>              

      <nav class="top-bar" data-topbar>
         <ul class="title-area">
            <li class="name">
            <h1><a href="#">My Site</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
         </ul>

        <section class="top-bar-section">
          <!-- Right Nav Section -->
          <ul class="right">
            <li class="active"><a href="#">Right Button Active</a></li>
            <li class="has-dropdown">
               <a href="#">Right Button with Dropdown</a>
               <ul class="dropdown">
               <li><a href="#">First link in dropdown</a></li>
              </ul>
            </li>
         </ul>

         <!-- Left Nav Section -->
         <ul class="left">
            <li><a href="#">Left Nav Button</a></li>
            </ul>
        </section>
      </nav>

   </header>

   <footer>
      <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>
   </footer>

</body>
</html>

对于样式表，它是空的，甚至尝试完全删除它只是为了确定但同样的事情，它的点掉下来了。

我错过了什么？ 谢谢

编辑：

好的，所以发现了一些东西，zurbs 基础文档页面上显示的代码在复制/粘贴时不起作用，但是如果我使用检查器并从他们的示例中复制 html，它就可以工作。但是，当您将浏览器缩小时，会出现带有菜单按钮的 3 行，但是当将鼠标悬停在它上面时，它不会下拉，单击也无济于事，如何解决？

html 是

<nav class="top-bar" data-topbar="">
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My Site</a></h1>
        </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>

我正在加载这些脚本

  <script src="js/vendor/modernizr.js"></script>
  <!-- Foundation Top Bar -->
  <script src="js/foundation.min.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.offcanvas.js"></script>

我也尝试删除 topbar 和 offcanvas 脚本，只使用foundation.min.js 之一，没有任何效果，按钮出现，但没有可用的下拉菜单。

Answer 1

我今天遇到了同样的问题，通过和你做的一样，我发现这是这一行中的“未点击”：

<li class="has-dropdown not-click">

我添加了它，现在它工作得很好（对我来说（仅？））。

Answer 2

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

没有让它工作，但以下做到了

$(document).ready(function(){
  $(document).foundation();
});

Answer 3

您现在可能已经找到了对这个问题的答案，但您可能需要添加以下代码以在文档准备好时初始化 Foundation。

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

Answer 4

如果你使用最小化版本的foundation（foundation.min.js）不要加载其他插件，因为它们是自动加载的，它会工作。

Answer 5

Foundation HTML Templates 的 Foundation 5 模板页面显示了一些顶栏导航示例（您的代码没问题），但没有提到的是依赖项。

• F5 需要 jQuery 2，大多数 cms' (Wordpress) 使用 jQuery 1
• jQuery 2 不适用于 IE 8 或更低版本，必须使用 IE 9 或更高版本

Answer 6

这对我有用：

$(document).ready(function(){
  $(document).foundation();
});

Answer 7

您的项目现在工作了吗？您将必须加载以下文件

<script src="js/vendor/modernizr.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
</script>

Answer 8

我遇到了同样的问题。为我解决的问题是删除 turbolinks：

1. 从您的 Gemfile 中删除 gem 'turbolinks' 行。
2. 从您的 app/assets/javascripts/application.js 中删除 //= require turbolinks。
3. 从您的 app/views/layouts/application.html.erb 中删除两个“data-turbolinks-track”=> 真正的哈希键/值对。 （来自http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4）

Answer 9

我个人在css-only can do the job just fine时尽量避免使用js。它使 Foundation 试图为您完成的工作的心智模型更加简单。

这是一个简单的HTML代码

<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">Menu 1</a>
    <ul>

只需要css声明类。