我正在使用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>
(ps stackoverflow 中的代码编辑器甚至不适用于切换部分,但您可以在 jsfiddle 上看到它:https ://jsfiddle.net/03bx493q/ )
你可以看到一些奇怪的东西,
当我单击按钮(第一次)时,它同时显示桌面版本菜单和画布菜单。然后我再次单击按钮关闭菜单。
当我单击按钮(第二次)时,它只显示画布外菜单。
我尝试了不同的方法来解决,例如将“hide-for-small”类添加到widemenu(它并没有像预期的那样有帮助)......
先谢谢了!