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>

（p.s。stackoverflow中的代码编辑器甚至不适用于切换部分，但你可以在jsfiddle上看到它：https://jsfiddle.net/03bx493q/）

你可以看到一些奇怪的东西，

当我点击按钮（第一次）时，它会显示两个桌面版本菜单和非画布菜单。然后我点击关闭菜单再次按下按钮。
当我点击按钮（第二次）时，它只显示离场菜单。

我尝试了不同的解决方法，比如在“大页面”中添加“hide-for-small”类（并没有按预期的那样帮助）......

先谢谢！

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>

画布外导航显示两个菜单

1 个答案: