我在我的单页网站上使用 Zurb Foundation 的固定顶栏，它包含指向页面内位置的锚链接。我希望这样每当点击展开的移动菜单内的链接时，菜单就会关闭。
目前，当点击链接时，页面会滚动，但菜单会在页面顶部保持打开状态。
在之前的 Foundation 版本中，我能够对代码进行逆向工程并找到一个简单的解决方案。由于更新到 4.3.1 以修复顶部栏的另一个问题，由于我对 javascript 的了解有限，我无法找到解决方案。
在我看来，如果我可以在单击菜单中的链接时触发关闭菜单的事件或函数，它就会被修复。之前，我将发生在链接点击的代码放在第 261 行。
当移动菜单关闭时，.fixed 被添加到顶部栏周围的 div 中，而 .expanded 和 .fixed 被从 .topbar div 中删除。
【问题讨论】：
标签： javascript html css zurb-foundation
我复制了Foundation 6下拉关闭函数代码中的一些代码。
为了使它工作，我还必须在菜单元素上设置选项 data-disable-hover="true 否则菜单不会在用户第一次单击其中的元素时关闭.
我在 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');
}
});
【讨论】：
我是第一次使用 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 sn-p 在单击我正在使用的默认菜单类中的导航项时针对小型（移动设备）检查当前断点，如果为 true，则将 css 选择器更改为“显示：无”，有效地关闭菜单切换。
【讨论】：
您可以尝试添加一些 jQuery 以在单击链接时折叠菜单。
您可以添加包装在脚本元素中的代码。将它放在所有 html 元素之后（在 body 元素内）。您也可以将它放在一个单独的 javascript 文件中，您可以像使用任何其他 javascript 文件一样获取该文件。确保将该链接放在 jquery 链接之后。
代码本身可以非常简单，因为当您打开和关闭菜单图标时，它看起来像 Foundation 向导航栏添加了一个名为“expanded”的类。因此，当有人单击您的按钮时，您可以删除“扩展”类。
它应该是这样的：
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，也可以用一个 id 调用选择器“.top-bar ul.right（或 .left，取决于你如何排列你的按钮）li”。在这种情况下，它将是：
jQuery(document).ready(function($) {
$('#myMenuId li').click(function() {
$('.top-bar').removeClass('expanded');
});
}(jQuery));
希望对您有所帮助。
【讨论】：
这对我有用：
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>
【讨论】：
一种更简洁的方式（而不是触发点击或删除类）：
$(document).on("click", ".top-bar li", function () {
Foundation.libs.topbar.toggle($('.top-bar'));
});
【讨论】：
.on("click", ".top-bar-section li" ...
试试：
$('#main-menu li').click(function() {
$('.toggle-topbar').trigger('click');
});
【讨论】：