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

我在一个WordPress主题中使用了Zurb Foundation 5和一个offcanvas菜单,这是一个普遍的工作,但我遇到了一个问题：

除了顶栏中的汉堡包图标外,我还可以选择在单击固定位置div元素.back-to-menu时打开菜单.
为了实现这一点,我使用该方法以编程方式打开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);

这不像使用“官方”方式那样整洁,但这是万无一失的,当然比使用它后打破菜单更好.

显然已经有一个issue在Foundation GitHub上提交了这个,并且只要它没有固定就提出了同样的解决方法.

标签：jquery,javascript,zurb-foundation
来源： https://codeday.me/bug/20190628/1320231.html