2

我正在尝试在 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 if this then that，我觉得我只是在搞砸这个非常简单的 javascript。

任何帮助将不胜感激！

4

3 回答 3

3

不确定您是否使用的是最新版本的 SlickNav，但从 v1.0.3 开始，正确的回调是beforeOpen、afterOpen和.beforeCloseafterClose

这是一支按预期工作的背景变化的快速笔：http: //codepen.io/ComputerWolf/pen/KpEKMW

请注意，当菜单打开和关闭以及每个子菜单时会触发这些。trigger如果您只想在打开或关闭整个菜单时更改背景，则可以使用来检查触发回调的内容。

于 2015-08-07T16:28:51.887 回答
0

这对我有用

/* 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' });
      }
    });
于 2019-08-20T16:58:46.403 回答
0

为了阐述@ComputerWolf，我添加了以下内容以添加和删除我在 Css 中设置样式的类。我使用触发器检查它是否来自打开/关闭按钮而不是子菜单

$('#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');
        }
      }
});
于 2015-09-10T18:59:23.877 回答