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

Zurb Foundation Offcanvas Menu stops working after toggling programmatically

本文关键字：方式切 停止工作 编程 Foundation Offcanvas 菜单 Zurb      更新时间：2023-09-26

我在Wordpress主题中使用了Zurb Foundation 5，该主题带有一个非画布菜单，通常可以正常工作，但我遇到了一个问题：

除了顶部栏中的汉堡包图标外，我还提供了在单击固定位置的div元素时打开菜单的选项。返回菜单。为了实现这一点，我使用该方法以编程方式打开offcanvas菜单，如Zurb的文档中所述。虽然这很好，但在我点击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;
})

有人能帮忙吗？

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

一种解决方法是通过模拟点击汉堡图标来触发offcanvas：

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

这并不像使用"官方"方式那么简单，但这是万无一失的，当然比使用后破坏菜单要好。

显然，基金会GitHub已经为此提出了一个问题，只要没有解决，就提出了同样的解决方案。

问题似乎是body类变得"固定"了，我用一些简单的css 修补了我的

body.fixed { position:static !important}
相关文章：