F6 导航栏没有响应，同时显示所有内容

Question

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css" integrity="sha256-NqI559iHqiWe5VxDi9mXE8i83ghn8Ru8BINyiPN7lDg=" crossorigin="anonymous">
  </head>
  <body>
    <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
      <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar" id="example-menu">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">Site Title</li>
          <li class="has-submenu">
            <a href="#0">One</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#0">One</a></li>
              <li><a href="#0">Two</a></li>
              <li><a href="#0">Three</a></li>
            </ul>
          </li>
          <li><a href="#0">Two</a></li>
          <li><a href="#0">Three</a></li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="Search"></li>
          <li><button type="button" class="button">Search</button></li>
        </ul>
      </div>
    </div>

    <script
     src="http://code.jquery.com/jquery-3.1.1.js"
     integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
     crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js" integrity="sha256-6Po73qUOfEfrvKtDy88HN0Xx6wjx3ZlngccJjsIVpIg=" crossorigin="anonymous"></script>
  </body>
</html>

这是我所有的代码。我添加了 Foundation 的 CSS 和 JS 插件，以及 F6 响应式导航栏的代码。但是导航栏并没有像它应该的那样工作，即使在代码片段中也是如此。它应该只是大屏幕上的 uls，但在大屏幕和小屏幕上，我把所有东西放在一起。为什么会这样？我已经测试了跨浏览器和跨CDN，但都是徒劳的。

Answer 1

您的 js 和 cdn 脚本在 body 标签中。将最后的 js 和 cdn 脚本部分放在 head 标签之间，并在正文标签中为 $(document).foundation(); 编写脚本。

那就试试吧，我希望它对你有用，因为它对我有用。

http://codepen.io/anon/pen/LxLBBE

Answer 2

我从 F6.2 升级到 F6.3 后遇到了类似的问题。对我有用的解决方案是将以下块添加到我的 foundation_and_overrides.scss 文件中：

.is-drilldown li, .is-drilldown .menu > li {
  display: block;
}

对于上下文，我深入研究了 Foundation 样式表并发现了一些有趣的东西。以前，Foundation 的 drilldown 组件具有以下样式：

~/gems/ruby-2.3.1/gems/foundation-rails-6.2.3.0/vendor/assets/scss/components/_drilldown.scss
.is-drilldown li {
  display: block !important;
}

此样式在 F6.3 更新中发生了变化：

~/gems/foundation-rails-6.3.0.0/vendor/assets/scss/components/_drilldown.scss

.is-drilldown li {
  display: block;
}

虽然避免使用 !important 是最佳做法，但在这种情况下，删除 !important 似乎导致了您描述的问题，因为 drilldown 组件的 F6.3 样式正在被 F6.3 menu 组件中的以下样式覆盖：

~/gems/foundation-rails-6.3.0.0/vendor/assets/scss/components/_menu.scss
.menu > li {
  display: table-cell;
  vertical-align: middle;
}

希望对您有所帮助！

F6 导航栏没有响应，同时显示所有内容

F6 Navbar not responsive, showing all content together

html

zurb-foundation

zurb-foundation-6