打开/关闭时更改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中设置样式的类。我使用触发器检查它是否来自打开/关闭按钮，而不是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

这对我很有效

/* 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' });
      }
    });