基金会的顶栏，切换不起作用

Posted 2023-03-16

【中文标题】基金会的顶栏，切换不起作用

【英文标题】：Foundation's top-bar, the toggle won't work

【发布时间】：2013-04-25 09:32:53

【问题描述】：

按照此处的说明进行操作：

顶部栏有四个主要元素，其中三个是 正确的功能：ul.title-area，一个 ul class="right/left 元素 包含在部分 class="top-bar-section" 中，并且 li.toggle-topbar 元素，将在移动设备中展开菜单 布局。你可以省略 li class="name" 只要你包括 .toggle-topbar 元素。

http://foundation.zurb.com/docs/components/top-bar.html

我创建了这个布局（这是我的 wordpress 主题加载的生成的 HTML）：

<header id="masthead" class="site-header" role="banner">
  <nav id="site-navigation" class="navigation-main top-bar row" role="navigation">
    <ul class="title-area small-12 large-6 columns">
      <!-- Title Area -->
      <li class="name">
        <!--h1 class="menu-toggle"-->
        <h1>
          <img src="http://ns2101.boxqos.com/wp-content/uploads/2013/04/logo.png" id="logo_image"  />
        </h1>
        <!-- 
<div class="screen-reader-text skip-link">
<a href="#content" title="Skip to content">
Skip to content
</a>
</div>
-->
            </li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon">
              <a href="#">
                <span>
                  Menu
                </span>
              </a>
            </li>
          </ul>
          <section class="top-bar-section small-12 large-6 columns">
            <ul id="menu-menu" class="left">
              <li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333">
                <a href="http://ns2101.boxqos.com/offnungszeiten/">
                  Öffnungszeiten
                </a>
              </li>
              <li id="menu-item-334" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-334">
                <a href="http://ns2101.boxqos.com/unser-restaurant/">
                  Unser Restaurant
                </a>
              </li>
              <li id="menu-item-335" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-335">
                <a href="http://ns2101.boxqos.com/willkommen/">
                  Willkommen
                </a>
              </li>
              <li id="menu-item-339" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-337 current_page_item menu-item-339">
                <a href="http://ns2101.boxqos.com/kontakt/">
                  kontakt
                </a>
              </li>
              <li id="menu-item-340" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-340">
                <a href="http://ns2101.boxqos.com/blog/">
                  Blog
                </a>
              </li>
            </ul>

            <script>
              $('.top-bar-section li').addClass('small-12 large-4');
              $('.top-bar-section').addClass('small-12 large-4');
            </script>
          </section>
  </nav>
  <!-- #site-navigation -->
</header>
<!-- #masthead -->

我已经包含了基金会的应用程序：

$(function()
        $(document).foundation(); 

)

问题是当窗口调整大小时顶部导航的切换不起作用....

http://ns2101.boxqos.com/kontakt/#

知道我错过了什么吗？

【参考方案1】：

您的问题是由于工具栏脚本未加载。您要么需要引用foundation.topbar.js 或foundation.min.js，然后确保它们已加载。在 FF 或 Dev 中使用 firebug。在 Chrome 中使用控制台查看您的网站与 Foundation 相关的问题。

【讨论】：

感谢您的回答。问题是这里没有这样的文件foundation.zurb.com/download.php 不应该用foundation.topbar.js 来处理吗？

如果您单击Download Foundation CSS 按钮，它将为您提供一个压缩文件。其中是您需要的js 文件，包括foundation.topbar.js，在js\foundation 文件夹内。

是的 topbar.js 包括在内，firebut 中的错误是针对foundation.toolbar.js 的......下载文件中没有......我应该从工具栏中删除调用。 js?

同时参考foundation.js，以便测试它是否正常工作：<script src="js/foundation.min.js"></script>。然后，您可以稍后只使用 topbar 脚本文件。据我所知，Foundation 中没有 toolbar.js 这样的东西。

就是这样，这是foundation.php包含器中的错字！工具栏 - > topbar 成功了！谢谢！！