我在我的单页网站上使用Zurb基金会的固定顶栏，并且它包含页面内地点的锚链接。我希望这样，只要点击扩展移动菜单中的链接，菜单就会关闭。如何在点击链接时关闭Foundation的顶栏菜单？
当前，单击链接时，页面会滚动，但菜单在页面顶部保持打开状态。
在之前的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));
的选择“.TOP吧ul.right（或取决于你如何安排你的按钮。左）礼”可以用一个id，如果也被称为你给你的菜单（ul元素）一个唯一的ID。在这种情况下，它将是：
jQuery(document).ready(function($) {
$('#myMenuId li').click(function() {
$('.top-bar').removeClass('expanded');
});
}(jQuery));
希望有所帮助。
尝试：
$('#main-menu li').click(function() {
$('.toggle-topbar').trigger('click');
});
因为我不明白的代码，我不知道该把它放在哪里，我尝试了几件事，但真的像在黑暗中拍摄的那样。 – Wookieguy
一个更清洁的方式（而不是触发点击或删除类）：
$(document).on("click", ".top-bar li", function() {
Foundation.libs.topbar.toggle($('.top-bar'));
});
这为我工作，但为了使其工作，并没有打破右侧的“菜单”按钮（仅在小型/手机屏幕上），我需要针对导航栏中的不同元素 - 针对此元素为我工作： '.on（“click”，“.top-bar-section li”...' – FireDragon
这对我来说是什么在起作用：
setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);
让我知道，如果这也适用于你。 （也许将“500”减少到短于半秒的时间）。
下面是一个扩大版：
<script type="text/javascript">
function hideDropDown() {
setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);
}
</script>
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a href="#">My menu</a>
<ul class="dropdown">
<li><a onclick="hideDropDown()" target="another_page" href="/some/where">Menu item</a></li>
</ul>
</li>
</ul>
</section>
</nav>
我与基金会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');
}
});
});
在地基6上的CSS选择“显示”被添加到一个扩展菜单，并设置为“显示：无”隐藏或“显示：块”扩展。这个jquery代码片段检查当前断点与我正在使用的默认菜单类中的导航项目点击一个小的（移动设备），如果为true，则将css选择器更改为“display：none”，从而有效关闭菜单切换。
我复制了Foundation 6下拉的关闭函数的代码中的一些代码。
为了使它工作，我也不得不设置选项菜单元素数据禁用悬停=“真否则菜单不会关闭第一次用户点击它的元素。
我写我的代码在AngularJS并使其工作。我猜它是这样的jQuery的。换句话说，代码没有进行测试。
$('#main-menu li').click(function closeDropdown() {
var $toClose = $('#main-menu');
if(!$toClose){
return;
}
var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0;
if (somethingToClose) {
$toClose.find('li.is-active').add($toClose).attr({
'aria-expanded': false,
'data-is-click': false
}).removeClass('is-active');
$toClose.find('ul.js-dropdown-active').attr({
'aria-hidden': true
}).removeClass('js-dropdown-active');
}
});
这个工作很完美，适应了我的时髦的菜单设置。由于其他原因，我最近已经加入了jQuery，这是重新学习它的一个很好的借口。谢谢。 – Wookieguy