Foundation 6 Off-canvas 菜单点击后自动关闭 [英] Foundation 6 Off-canvas menu auto-close after click

问题描述

我一直在寻找如何在点击某个菜单项后自动关闭画布外菜单，但似乎没有任何效果.

I've been searching how to auto-close off-canvas menu after some menu item is clicked but nothing seems to work.

所以我遵循了关于如何在 Foundation 6 文档上制作画布菜单的指南并且它有效.这部分没问题.现在，当我点击某个链接菜单时，它就停留在那里，我希望它关闭.有谁知道如何解决这个问题.

So I followed guide on how to make off-canvas menu on Foundation 6 docs and it works. This part is okay. Now when I click on some link menu just stays there and I want it to close. Does anyone know how to fix that.

我找到了应该可以解决问题的代码段，但是在我应用了这个 JS 后，我的菜单停止显示.其他人报告了同样的问题.

I've found snippet that should do the trick but my menu stops showing after I appy this JS. Others report the same problem.

$(document).foundation({
  offcanvas : {
    open_method: 'move', // Sets method in which offcanvas opens, can also be 'overlap'
    close_on_click : true
  }
});

这里是文档，但因为我不知道关于 JavaScript 我恳求有人写出正确的代码.

Here are the docs, but since I don't know much about JavaScript I beg someone to write correct code.

推荐答案

您可以在单击链接时使用 .off-canvas 菜单上的 close 方法:

You could use the close method on the .off-canvas menu when a link is clicked:

$('.off-canvas a').on('click', function() {
    $('.off-canvas').foundation('close');
});

点击此处观看演示.

Click Here for a demo.

这篇关于Foundation 6 Off-canvas 菜单点击后自动关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！