Как применить класс к элементу тела, используя адаптивную навигацию?

Question

Я использую Foundation Responsive Navigation, чтобы отобразить значок гамбургера для мобильных устройств. В моей жизни я не могу понять, как применить класс к элементу тела, когда отображается мобильное меню (после нажатия на значок гамбургера)

Может кто-нибудь сказать мне, что я делаю неправильно? В настоящее время единственное, что происходит при переключении на гамбургер, - это атрибут стиля «display: none», который переключается на div .mobile-nav. Я знаю, что нет ничего плохого в настройке 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