オフキャンバスナビゲーションに2つのメニューが表示されます

Question

the example from Foundation building block sectionを使用して「キャンバスのないトップバー」を作成しています。

：ここ

は私のコードは

$(document).foundation();

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="off-canvas-wrapper"> 
 
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 
 

 
    <!-- off-canvas title bar for 'small' screen --> 
 
    <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium"> 
 
     <div class="title-bar-left"> 
 
     <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button> 
 
     <span class="title-bar-title">Menu</span> 
 
     </div> 
 

 
    </div> 
 

 
    <!-- off-canvas left menu --> 
 
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas> 
 
     <ul class="menu vertical"> 
 
     <li>Item</li> 
 
     <li>Item</li> 
 
     <li>Item</li> 
 
     </ul> 
 
    </div> 
 

 
    <!-- "wider" top-bar menu for 'medium' and up --> 
 
    <div id="widemenu" class="top-bar"> 
 
     <div class="top-bar-left"> 
 
     Icon 
 
     </div> 
 
    </div> 
 

 
    <!-- original content goes in this container --> 
 
    <div class="off-canvas-content" data-off-canvas-content> 
 
     <div class="row column"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </div> 
 
    </div> 
 

 
    <!-- close wrapper, no more content after this --> 
 
    </div> 
 
</div>

（https://jsfiddle.net/03bx493q/ PS stackoverflowの中にコードエディタでもトグル部分には機能しませんが、あなたはjsfiddleでそれを見ることができる）であり、

あなたは何か変わったものを見ることができます。

• ボタンを初めてクリックすると、デスクトップの バージョンメニューとオフキャンバスメニューの両方が表示されます。次に、ボタンをもう一度 をクリックしてメニューを閉じます。

• ボタンを2回クリックすると、 オフキャンバスメニューのみが表示されます。

私は...高度で

おかげで、このような（そして、それは期待通り役立ちません）widemenuに、「非表示のため、小さな」クラスを追加すると解決するためのさまざまな方法を試してみました！

Answer 1

正確な問題はわかりませんが、html構造は正しくはありません。私はあなたのコンテンツを使用して変更した実施例を、持っている：

Fiddle Demo

HTML：

<div class="off-canvas-wrapper"> 
    <!-- off-canvas left menu --> 
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left"> 
     <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button> 
     <ul class="mobile-ofc vertical menu"> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     </ul> 
    </div> 

    <!-- "wider" top-bar menu for 'medium' and up --> 
    <div class="off-canvas-content" data-off-canvas-content> 
     <div id="widemenu" class="top-bar show-for-medium"> 
     <ul class="menu"> 
      <li class="topbar-title"> 
      Icon 
      </li> 
     </ul> 
     </div> 

     <!--top-bar for small--> 
     <div id="offCanvasLeft" class="title-bar hide-for-medium"> 
     <div class="title-bar-left"> 
      <button class="menu-icon" type="button" data-open="offCanvasLeft"></button> 
      <span class="title-bar-title">Menu</span> 
     </div> 
     </div> 

     <!-- original content goes in this container --> 
     <div class="expanded row"> 
     <div class="row columns"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </div> 
     </div> 
    </div> 
    </div>