Zurb Foundation 5-顶部栏-可在小型浏览器窗口上折叠，但不能在移动设备上折叠

Zurb Foundation 5 - Top Bar - Collapses on small browser window but not on mobile

本文关键字：折叠 但不能 移动 窗口 小型 5-顶 Foundation Zurb 浏览器      更新时间：2023-09-26

从文档页面中提取代码

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name"> 
[etc...]
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

随后的结果是，折叠浏览器桌面窗口会生成菜单图标和活动子项链接。

它在Chrome正常桌面模式下按预期折叠。。。然而，当访问Chrome的开发工具时，所有移动渲染都不是生成菜单图标（显然也不是子项）。

验证了各种问题。。。在body标记的末尾加载所有的foundationjavascript不会改变行为。删除在foundation.css之后加载的带有移动实例自定义css类的文件不会改变行为。除了robots.txt之外，没有任何应用程序代码调用user-agent

以下可能是相关的，但我相信它与基本代码一起提供：

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 58.75em; }

因此，菜单是在小型桌面屏幕上生成的，而不是在移动屏幕上生成。

如何解决这个问题？有没有一个基础配置以某种方式禁用了移动设备的这种逻辑？

不是预期的答案。还有一个烂摊子。但我仍然无法确定为什么切换是而不是发生（而在其他情况下，使用基础的css将适当的样式应用于small视口。）

从本质上讲，用下拉菜单交换一侧，重新创建菜单。

苏。。。这是一个rails应用程序，与浏览器gem（条件if browser）和字体真棒gem结合使用，可以更快地生成汉堡图标，下面就完成了任务，呃…kludge。

<!-- Right Nav Section -->
<ul class="right">
<% if browser.mobile? %>
  <li class="has-dropdown">
    <a href="#menu"><i class="fa fa-bars"></i> Menu</a>
    <ul class="dropdown">
      <li class="active"> [etc.][etc.]
相关文章：