如何在单击链接时关闭Foundation顶部栏菜单？

Question

我在我的单页网站上使用Zurb Foundation的固定顶部栏,它包含指向页面内各个位置的锚点链接.我希望这样,只要点击展开的移动菜单中的链接,菜单就会关闭.

目前,当点击链接时,页面会滚动,但菜单会在页面顶部打开,不在视图范围内.

在以前版本的Foundation中,我能够对代码进行反向工程并找到一个简单的解决方案.由于更新到4.3.1以解决顶部栏的另一个问题,由于我对javascript的了解有限,我无法找到解决方案.

顶栏

在我看来,如果我点击菜单中的链接时可以触发菜单关闭的事件或功能,它将被修复.以前,我将我的代码发生在链接上,点击第261行.

当移动菜单关闭时,.fixed将添加到顶部栏周围的div,而.expanded和.fixed将从.topbar div中删除.

Answer 1

单击链接时,可以尝试添加一些jQuery来折叠菜单.

您可以添加包含在脚本元素中的代码.将它放在所有html元素(body 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));

希望有所帮助.