Изменить фон в 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)'});
    }
    });
});

Я попытался использовать basic, если это то, что, и я чувствую, что я просто испортил этот очень простой кусок 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');
        }
      }
});

Answer 3

This worked for me

/* slicknav mobile menu active 
      ========================================================*/
    var $bg;
    $('.mobile-menu').slicknav({
      prependTo: '.navbar-header',
      parentTag: 'liner',
      allowParentLinks: true,
      duplicate: true,
      label: '',
      closedSymbol: '<i class="lni-chevron-right"></i>',
      openedSymbol: '<i class="lni-chevron-down"></i>',
      init: function () {
        $bg = $('.slicknav_menu');
      },
      afterOpen: function () {
        $bg.css({ 'background': 'rgba(25,118,210,.95)' });
      },
      afterClose: function () {
        $bg.css({ 'background': 'transparent' });
      }
    });