Question

刚刚切换我的rails项目以测试Zurb Foundation 5，现在切换 - 顶部栏菜单无效。

当视口很小时，顶部栏菜单项会消失，菜单图标会像以前一样显示，但是当我点击菜单图标时，没有任何事情发生。

我有以下代码来显示顶栏菜单。

<nav class="top-bar">
  <ul class="title-area">
    <li class="name"></li>
    <li class="toggle-topbar menu-icon">
      <a>{href: "#"}
        <span>Menú</span></a>
    </li>
  </ul>
  <section class="top-bar-section">
    <ul class="left">
      <li>
        <a class="i fi-home">{href: "/ui/home"}
          &nbsp;Inicio</a></li>
      <li>
        <a>{href: "/ui/wine_reviews"} Críticas de Vinos</a></li>
      <li>
        <a>{href: "/ui/wine_tastings"} Catas y Maridajes</a></li>
      <li>
        <a>{href: "/ui/blogs"} Noticias</a></li>
    </ul>
    <ul class="right">
      <li>
        <a>{href: "#"}
          <i class="fi-lock"></i>
          &nbsp;Club TastaVi</a></li>
    </ul>
  </section>
</nav>

这是我网格中的顶栏菜单。

Answer 1

顶栏有同样的问题。在将zurbs代码与我的代码进行比较后，我注意到了差异。

<nav class="top-bar" data-topbar>

我错过了数据顶部栏。添加后我的topbar开始正常工作。

Answer 2

问题似乎出现在Foundation.topbar.js文件中。以下代码部分

breakpoint : function () {
        return matchMedia(Foundation.media_queries['medium']).matches;
    }

需要更改为

breakpoint : function () {
        return !matchMedia(Foundation.media_queries['topbar']).matches;
    }

Answer 3

仅仅是一个FYI，顶部栏中还有另一个打破滚动的错误。您需要从：

更改foudation.topbar.js的第38行

self.settings.stick_topbar = topbar;

到

self.settings.sticky_topbar = topbar;

这已在5.0.3版本中修复，但截至昨晚，基金会网站仍在服务5.0.2

Answer 4

这是让你工作所需的最低限度......我失踪了$(document).foundation(); ...

<html>
<head>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
</head>
<body>


<nav class="top-bar" data-topbar="" data-options="is_hover: false" role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Mobile Parent Links</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section" style="left: 0%;">
        <ul class="left">
            <li class="has-dropdown not-click"><a href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a>

                <ul class="dropdown">
                    <li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
                    <li class="parent-link show-for-small">
                        <a class="parent-link js-generated" href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a></li>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.topbar.min.js'></script>

<script>
$(document).ready(function() {
    $(document).foundation();
});
</script>

</body>
</html>

Answer 5

我之前遇到过同样的问题。对我来说，当我将topbar.js包含在body中并位于foundation.js。

之下时，它就可以工作

所以，而不是

<head>
   <script src="../js/foundation.js"></script>
   <script src="../js/foundation/foundation.topbar.js"></script>
....
</head>

尝试将topbar.js放在体内，就像这样

<head>
   <script src="../js/foundation.js"></script>
....
</head>

<body>
   <script src="../js/foundation/foundation.topbar.js"></script>
....
</body>

Answer 6

我在基金会5.1.1遇到了类似的问题。以上建议的修补程序均不适用于我（我已经拥有data-topbar属性，并且此版本的Foundation中已更新breakpoint函数。我正在使用MacOS上的Firefox测试我的代码开发。我的Javascript包含在身体的最后。

在我的情况下，通过将Zurb升级到版本5.2.1来解决问题。

Answer 7

我从昨天晚上开始经历这个问题＆amp;通过所有这些线程，没有什么技巧真的有帮助。最后，以下是帮助我解决问题的步骤：

Re-Downloaded updated Complete Foundation。
包含我之前缺少的html元（视口）标记。
我以这种方式将文件包含在我的页面中：

<link rel="stylesheet" href="/css/foundation/foundation.css"/>
<link rel="stylesheet" href="/css/foundation/app.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/foundation/foundation.js"></script>
<script src="/js/foundation/foundation.topbar.js"></script>
在jquery而不是js中调用基础功能如下：
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>

Zurb Foundation 5 toggle-topbar无效

7 个答案: