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.min.js），请不要加载其他插件，因为它们会自动加载，并且可以正常工作。

Answer 5

Foundation HTML Templates上的基础5模板页面显示了一些顶部导航示例（您的代码没问题），但未提及的是依赖项。

F5需要jQuery 2，大多数cms＆＃39; （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：

移除宝石＆＃39; turbolinks＆＃39;来自Gemfile的行。
从app / assets / javascripts / application.js中删除// = require turbolink。
删除两个＆＃34;数据 - turbolinks-track＆＃34; =＆GT;来自app / views / layouts / application.html.erb的真实哈希键/值对。（来自http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4）

Answer 9

就个人而言，我试图在css-only can do the job just fine时避免使用js。它保持了基金会试图为你完成的精神模型更加简单。

这是一个简单的HTML代码

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

只需要css声明类。

基金会5顶级酒吧不会下降

9 个答案: