Foundation 6 画布外菜单点击后自动关闭答案

【问题标题】：Foundation 6 Off-canvas menu auto-close after clickFoundation 6 画布外菜单点击后自动关闭
【发布时间】：2016-03-11 12:31:23
【问题描述】：

我一直在搜索如何在单击某些菜单项后自动关闭画布外菜单，但似乎没有任何效果。

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

我发现 sn-p 应该可以解决问题，但是在我应用这个 JS 后我的菜单停止显示。其他人报告了同样的问题。

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

Here are the docs，但由于我对 JavaScript 不太了解，我恳求有人编写正确的代码。

【问题讨论】：

标签： javascript zurb-foundation off-canvas-menu

【解决方案1】：

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

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

点击Here观看演示。

【讨论】：

完美运行。这正是我所需要的。谢谢！
不起作用，因为它在单击时停止自行关闭。如果我们再次单击菜单项，它应该会关闭，但是使用此代码它会停止。

【解决方案2】：

提前，对不起我的英语不好，

上网查了一下，最后，上面Yass提供的脚本就可以了。但是当我插入 Slick 滑块脚本时，它不再起作用了。

我刚刚找到了一个适合我的解决方案，但可能有错误，不知道。

在基础 offcanvas 文档中，给出了一个关闭画布的关闭按钮，如下所示。

<button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
</button>

所以我对其进行了调整并将“data-close”添加到链接中，当我点击时，它会滚动到特定的 div 并关闭画布

这里是更多理解的链接？因为我觉得我的解释很烂

https://jsfiddle.net/mbsj7d7p/

【讨论】：