单击链接时如何关闭Foundation的顶栏菜单？
我在我的单页网站上使用Zurb基金会的固定顶栏，并且它包含页面内地点的锚链接。 我希望这样，只要点击扩展移动菜单中的链接，菜单就会关闭。
目前，点击链接时，页面会滚动，但菜单在页面顶部保持打开状态。
在之前的Foundation版本中，我能够对代码进行反向工程并找到一个简单的解决方案。 自从更新到4.3.1来修复顶栏的另一个问题后，由于我对javascript的知识有限，我无法找到解决方案。
顶栏
在我看来，如果点击菜单中的链接时，如果我可以触发菜单关闭的事件或功能，它将被修复。 以前，我把我的代码发生在点击261行的链接上。
当移动菜单关闭时，.fixed会添加到顶栏的div中，而.expanded和.fixed会从.topbar div中移除。
当你点击一个链接时，你可以尝试添加一些jQuery来折叠菜单。
您可以添加包装在脚本元素中的代码。 将它放在所有html元素（body元素内）之后。 你也可以把它放在一个单独的JavaScript文件中，你可以像其他任何JavaScript文件一样来源。 确保你在jQuery链接之后放置该链接。
代码本身可以非常简单，因为它看起来像基础，当你打开和关闭菜单图标时，向导航栏添加名为“扩展”的类。 所以当有人点击你的按钮时，你可以删除“扩展”类。
这应该是这样的：
jQuery(document).ready(function($) {
$('.top-bar ul.right(or .left depending how you arranged your buttons) li').click(function() {
$('.top-bar').removeClass('expanded');
});
}(jQuery));
如果你给你的菜单（ul元素）一个唯一的id，那么选择器'.top-bar ul.right（或者.left取决于你如何安排你的按钮）li'可以用一个id调用。 在这种情况下，它将是：
jQuery(document).ready(function($) {
$('#myMenuId li').click(function() {
$('.top-bar').removeClass('expanded');
});
}(jQuery));
希望有所帮助。
尝试：
$('#main-menu li').click(function() {
$('.toggle-topbar').trigger('click');
});
我正在与Foundation 6进行首次合作，当我试图找出一种方式来关闭手机上的新顶栏菜单时，我点击了一个链接，然后我跑过这篇文章。 我想对我的解决方案发表评论，以防其他在Foundation 6上工作的人跑过这篇文章，因为这对我来说是一个很好的起点。
以下是我所做的：
导航设置 - 中大断点水平导航，小断点响应垂直导航
<!-- Mobile responsive toggle (hamburger menu) -->
<div class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- Nav items -->
<div id="siteNav" class="top-bar">
<p><ul class="vertical medium-horizontal menu text-center">
<li ><a href="#home" onClick="">HOME</a></li>
<li ><a href="#services">SERVICES</a></li>
<li ><a href="#contact">CONTACT</a></li>
</ul></p>
</div>
然后我在这篇文章中添加了基于以前解决方案的jquery的修改版本（感谢amazingBastard和Cerbrus）：
$(document).ready(function($) {
$('#siteNav li').click(function() {
if(Foundation.MediaQuery.current == 'small'){
$('#siteNav').css('display', 'none');
}
});
});
在Foundation 6中，CSS选择器“display”被添加到扩展菜单中，并设置为隐藏的“display：none”或扩展的“display：block”。 这个jquery代码片段检查当前断点与我正在使用的默认菜单类中的导航项目点击一个小的（移动设备），如果为true，则将css选择器更改为“display：none”，从而有效关闭菜单切换。
链接地址: http://www.djcxy.com/p/62055.html上一篇: How can I close the Foundation topbar menu when a link is clicked?