Question

我正在使用Foundation的Responsive Navigation来显示移动汉堡图标。对于我的生活，我无法弄清楚如何在显示移动菜单时（在点击汉堡包图标后）将一个类应用于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');
});

Answer 1

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

toggled.zf.responsiveToggle

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

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

1 个答案: