4

我正在使用 Foundation 的响应式导航来显示移动设备的汉堡图标。对于我的生活，我无法弄清楚如何在显示移动菜单时将类应用于 body 元素（单击汉堡图标后）

有人可以告诉我我做错了什么吗？目前，切换汉堡包时唯一发生的事情是在 .mobile-nav div 上切换样式属性“display: none”。我知道在这个问题之外设置的 JavaScript 没有任何问题，因为我可以看到其他 console.log() 语句。

<a href="#" class="burger" data-toggle>-</a>

<div class="mobile-nav" id="mobile-nav">
  <ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown">
    <li><a href="#">Link 1</li>
    <li><a href="#">Link 2</li>
  </ul>
</div>

这是我尝试过的，但控制台中没有出现任何内容：

$('[data-responsive-toggle]').on('toggled.zf.responsiveNavigation', function () {
    console.log('responsive navigation toggled');
});

$('.mobile-nav').on('toggled.zf.responsiveNavigation', function () {
    console.log('responsive navigation toggled');
});

$('#mobile-nav').on('toggled.zf.responsiveNavigation', function () {
    console.log('responsive navigation toggled');
});
4

1 回答 1

3

这已经很晚了，但是我们今天遇到了同样的问题，发现还有另一个可以利用的事件：

toggled.zf.responsiveToggle

参考：https ://github.com/zurb/foundation-sites/issues/9191

于 2016-12-14T04:09:33.887 回答