基金会的顶级酒吧，切换将无法正常工作

Question

继从这里的说明：

顶栏有四个要素，其中三个都需要 适当的功能：ul.title区，一个ul class =“右/左元素 ”封闭在section class =“top-bar-section”中，而 li.toggle-topbar元素将展开移动版 中的菜单。您可以省略li class =“name”只要包含 .toggle-topbar元素。

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

我创造了这个布局（这是生成的HTML，我的wordpress主题负载）：

<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" alt="Phoenix Concept" /> 
     </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/#

任何想法我误解？

Answer 1

您的问题是由于工具栏脚本未加载。您需要参考foundation.topbar.js或foundation.min.js，然后确保它们已加载。在FF或Dev中使用Firebug。在Chrome浏览器中查看您的网站与Foundation的问题。