基金會的頂級酒吧，切換將無法正常工作

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的問題。