Foundation 6 Off-canvas 菜单点击后自动关闭

Question

我一直在寻找如何在单击某些菜单项后自动关闭关闭-canvas 菜单，但似乎没有任何效果。

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

我找到了应该可以解决问题的代码段，但在我应用此 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了解不多，求大神指正。

Answer 1

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

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

点击Here进行演示。

Answer 2

提前，抱歉我的英语不好，

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

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

在 foundation offcanvas 文档中，给出了关闭 canvas 的关闭按钮，如下所示。

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

所以我对其进行了调整并将“data-close”放入link，当我单击时，它会滚动到特定的div并且关闭 canvas

这里是 link 以了解更多信息？因为我觉得我的解释很烂

https://jsfiddle.net/mbsj7d7p/

Foundation 6 Off-canvas 菜单点击后自动关闭

Foundation 6 Off-canvas menu auto-close after click

javascript

zurb-foundation

off-canvas-menu