Question

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

所以我按照指南介绍了如何在Foundation 6文档上制作非画布菜单并且它有效。这部分没关系。现在，当我点击一些链接菜单时，就在那里，我希望它关闭。有谁知道如何解决这个问题。

我找到了应该做的技巧片段，但是在我应用这个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

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

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

点击 Here 进行演示。

Answer 2

事先，抱歉我的英语不好，

只需通过在线查找，最后，Yass提供的脚本正在运行。但是当我插入Slick滑块脚本时，它就不再有用了。

我刚刚找到了一个对我有用的解决方案，但也许有bug，dunno。

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

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

所以我调整了它并将＆＃34; 数据关闭＆＃34;到链接，当我点击它，它滚动到特定的div并关闭画布

这是更多理解的链接？因为我认为我的解释很糟糕

https://jsfiddle.net/mbsj7d7p/

单击

2 个答案: