Zurb Foundation顶部菜单栏下拉列表无法正常工作(手机大小一)
Gid*_*oon 6 html javascript jquery zurb-foundation drop-down-menu
当扩展栏时,大多数人都在谈论下拉菜单当您将浏览器窗口调整为手机大小时,我正在谈论菜单.你应该可以通过菜单和项目列表下拉 http://foundation.zurb.com/docs/components/topbar.html 代码来自这个页面,(第二个例子).如果你重新调整它应该显示菜单和下拉项目.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/custom.modernizr.js"></script>
<script src="js/jquery.js"></script>
<script src="js/foundation.js"></script>
<script src="js/foundation.dropdown.js"></script>
<meta charset="utf-8">
<title>Gideon Sassoon</title>
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href=""><span>Menu</span>
</a>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Nav Button Active</a></li>
<li class="has-dropdown not-click">
<a href="#">Right Button with Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
</section>
</nav>
<script>$(document).foundation();</script>
</body>
</html>
好的,所以代码是正确的,我已经检查过,而且朋友也有.澄清我并不是指具有下拉菜单的右键.这完全没问题.
如果我理解正确的话，您希望将鼠标悬停在此处时“移动模式”下的顶部栏菜单按钮会下拉
用鼠标。
在这种情况下，顶部栏按设计工作 - 移动触摸设备上没有悬停，因此它仅在移动模式下对触摸/单击做出反应。
编辑：
我现在明白您的问题是单击“菜单”切换会重新加载页面。您似乎忘记包含 Foundation 顶栏脚本：
<script src="js/foundation.js"></script>
<script src="js/foundation.dropdown.js"></script>
<script src="js/foundation.topbar.js"></script>