javascript – 如何使用Foundation的响应式导航将类应用于body元素？

我正在使用Foundation的Responsive Navigation来显示移动汉堡图标.对于我的生活,我无法弄清楚如何在显示移动菜单时将一个类应用于body元素(点击Hamburger图标后)

有人能告诉我我做错了什么吗？目前,切换汉堡包时唯一发生的事情是在.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');
});

解决方法:

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

toggled.zf.responsiveToggle

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

标签：jquery,javascript,zurb-foundation,zurb-foundation-6,responsive-navigation
来源： https://codeday.me/bug/20190627/1310120.html