javascript - Zurb Foundation Offcanvas 菜单在以编程方式切换后停止工作

Question

我在带有 offcanvas 菜单的 Wordpress 主题中使用 Zurb Foundation 5，这在一般情况下工作正常，但我遇到了一个问题:

除了顶部栏中的汉堡图标外，我还提供了在单击固定位置的 div 元素时打开菜单的选项 .back-to-menu。 为实现这一点，我使用了 Zurb 文档中描述的以编程方式打开 offcanvas 菜单的方法。 虽然这工作正常，但在我点击 div.back-to-menu 打开菜单然后再次关闭菜单后，我似乎无法再通过点击顶部栏中的汉堡包图标来打开菜单.

这是打开菜单的代码:

jQuery('.back-to-menu').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    setTimeout(function() {
        $('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right');
    }, duration);
    return false;
})

有人能帮忙吗？

Answer 1

这似乎是 Foundation 中的一个错误，当我在 Foundation 文档页面上执行您的脚本时，出现了同样的错误，菜单打开和关闭但随后被破坏。

解决方法是通过模拟点击汉堡包图标来触发 offcanvas:

setTimeout(function() {
    $('.off-canvas-wrap').find('.left-off-canvas-toggle').click(); 
}, duration);

这不像使用“官方”方式那么整洁，但这是万无一失的，而且肯定比在使用后破坏菜单要好。

---

显然已经有一个 issue在 Foundation GitHub 上提交了此文件，只要未修复，就会提出相同的解决方法。