Изменить фон в slicknav при открытии/закрытии

Question

Я пытаюсь изменить фон в Slicknav, когда меню Slicknav открыто и закрыто.

Я использую этот код, но он не работает для меня.

$(function(){ 
    var $bg; 
    $('#menu-home').slicknav({ 
    duplicate: false, 
    label: '', 
    init: function(){ 
     $bg = $(".slicknav_menu"); 
    }, 
    open: function(){ 
     $bg.css({'background': '#222 !important'}); 
    }, 
    close: function(){ 
     $bg.css({'background': 'rgba(0, 0, 0, 0)'}); 
    } 
    }); 
}); 

Я попытался с помощью базисным, если это то, что я чувствую, что я просто Мессинг это очень простой кусок JavaScript.

Любая помощь была бы принята с благодарностью!

Answer 1

Не уверен, что если вы используете последнюю версию SlickNav, но по состоянию на v1.0.3 собственные обратные вызовы являются beforeOpen, afterOpen, beforeClose и afterClose.

Вот быстрое перо с изменением фона работает, как ожидалось: http://codepen.io/ComputerWolf/pen/KpEKMW

Как примечание, они обжигают при открытии меню и закрывается, а также каждого подменю. Вы можете использовать trigger, чтобы проверить, что срабатывает обратный вызов, если вы хотите только изменить фон, когда все меню открыто или закрыто.

Answer 2

Чтобы изложить на @ComputerWolf, я добавил следующее, чтобы добавить и удалить класс, который я создал в Css. Я использовал триггер, чтобы проверить, не произошло ли это из кнопки Open/Close, а не SubMenu

$('#mobile-menu').slicknav({ 
     label: '', 
     beforeOpen: function(trigger){ 
     if($(trigger).hasClass('slicknav_btn')){ 
      $('.slicknav_menu').addClass('open-menu'); 
     } 
     }, 
     afterClose: function(trigger){ 
     if($(trigger).hasClass('slicknav_btn')){ 
      $('.slicknav_menu').removeClass('open-menu'); 
     } 
     } 
});