Question

我在一个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;
})

有人可以帮忙吗？

Answer 1

这似乎是基金会的一个错误，当我在基金会文档页面上执行你的脚本时发生同样的错误，菜单打开和关闭但随后被打破。

解决方法是通过模拟汉堡包图标上的点击来触发离线扫描：

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

这并不像使用＆＃34;官方＆＃34;那样整洁。方式，但这是万无一失的，当然比使用它后打破你的菜单更好。

显然已经有一个issue在基金会GitHub上提交了这个，并且提出了相同的解决方法，只要它没有固定。

Answer 2

问题似乎是身体类变得固定＆＃34;我用一些简单的CSS修补了我的

body.fixed { position:static !important}

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

2 个答案: