0

我正在使用 Zurb Foundation 4，我的顶部栏导航没有下拉。我知道我的文件链接正确，我没有收到任何控制台错误，并且在调整浏览器大小时我的 div 已到位，这意味着我的 Foundation 文件已正确链接。当我调整到某个点时，我的顶部栏甚至会塌陷，这就是我想要的。

下拉菜单不起作用。当我折叠我的导航然后单击它以尝试展开时，什么都没有发生，而且当我只是滚动按钮时，什么也没有发生。

头： 

  <script src="jquery-1.10.2.min.js"></script>
  <script src="js/foundation.min.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>

和正文菜单 

<section class="top-bar-section">

  <!-- Right Nav Section -->
  <ul class="right">
    <li class="divider"></li>
    <li class="has-dropdown">
      <a href="#">Main Item 4</a>
      <ul class="dropdown">
        <li><label>Section Name</label></li>
        <li class="has-dropdown">
          <a href="#" class="">Has Dropdown, Level 1</a>
          <ul class="dropdown">
            <li><a href="#">Dropdown Options</a></li>
            <li><a href="#">Dropdown Options</a></li>
            <li class="has-dropdown">
              <a href="#">Has Dropdown, Level 2</a>
              <ul class="dropdown test">
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
              </ul>
            </li>
            <li><a href="#">Subdropdown Option</a></li>
            <li><a href="#">Subdropdown Option</a></li>
            <li><a href="#">Subdropdown Option</a></li>
          </ul>
        </li>
        <li><a href="#">Dropdown Option</a></li>
        <li><a href="#">Dropdown Option</a></li>
        <li class="divider"></li>
        <li><label>Section Name</label></li>
        <li><a href="#">Dropdown Option</a></li>
        <li><a href="#">Dropdown Option</a></li>
        <li><a href="#">Dropdown Option</a></li>
        <li class="divider"></li>
        <li><a href="#">See all &rarr;</a></li>
      </ul>
    </li>
    <li class="divider"></li>
    <li><a href="#">Main Item 5</a></li>
    <li class="divider"></li>
    <li class="has-dropdown">
      <a href="#">Main Item 6</a>
      <ul class="dropdown">
        <li><a href="#">Dropdown Option</a></li>
        <li><a href="#">Dropdown Option</a></li>
        <li><a href="#">Dropdown Option</a></li>
        <li class="divider"></li>
        <li><a href="#">See all &rarr;</a></li>
      </ul>
    </li>
  </ul>
</section>

4

2 回答 2

0

请注意，foundation.min.js 具有以特殊方式设置的所有参数集：

Foundation.libs.topbar={name:"topbar",version:"5.0.1",settings:{index:0,sticky_class:"sticky",custom_back_text:!0,back_text:"Back",is_hover:!0,mobile_show_parent_link:!1,scrolltop:!0}

我不得不恢复使用单独的文件foundation + foundation.topbar 以使其正常运行。

诚然，我无法解释为什么foundation.min 文件的设置不同。

于 2014-06-03T14:41:54.343 回答
0

删除调用，foundation/foundation.topbar.js因为 foundation.min.js已经包含代码foundation.topbar.js

如果你想单独调用这些项目，你应该调用 foundation/foundation.js（而不是 min）和foundation/foundation.topbar.js

于 2013-10-08T21:49:13.003 回答