Foundation 6离屏菜单点击后自动关闭

Question

我一直在寻找如何在点击某个菜单项后自动关闭侧边栏菜单，但似乎没有任何作用。

因此，我按照基础6文档上制作侧边栏菜单的指南进行操作，它可以正常工作。这部分没问题。现在，当我点击某个链接菜单时，菜单仍然保持打开状态，而我想要它关闭。有人知道如何解决这个问题吗？

我找到了一个应该能解决问题的代码片段，但是当我应用这个JS后，我的菜单停止显示。其他人也报告了同样的问题。

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

这里有文档，但由于我对JavaScript不太了解，希望有人能写出正确的代码。

- Kira

Answer 1

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

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

点击此处查看演示。

- Yass

---

完美运行。正是我所需要的。谢谢！ - Kira

代码有问题，因为它在点击后自动关闭了。如果我们再次点击菜单项，它应该关闭，但是这段代码却停止了工作。 - fdrv

Answer 2

提前道歉我的英语很差，

只是在线查找并最终使用Yass提供的脚本。但是当我插入Slick滑块脚本时，它不再起作用。

我发现了一个对我有用的解决方案，但可能存在错误，不确定。

在Foundation 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/

- Shinno