Javascript 在菜单处于活动或非活动状态时切换图标类。多级推送菜单

我正在使用找到的多级推送菜单

我试图在菜单处于活动或非活动状态时添加和删除类

我曾尝试使用一个在非活动类（.multi-levelpushmenu\u-inactive）上切换的函数来实现这一点，但我无法实现。现在我尝试使用内置的回调函数

这些都有文件记录

问题似乎在于，没有回调来检测菜单何时处于非活动状态（即当所有动画完成且菜单回到起始位置时）。例如，当任何子菜单打开/关闭时，OnCollapSemenud将触发

我把所有东西都放在一把小提琴上，但我的代码如下所示：

 // global vars
var _leftMenu = $('#leftMenu');
var _icon = _leftMenu.find('.fa');
var _menu = _leftMenu.find('.vert');

// pushmenu options
_leftMenu.multilevelpushmenu({
    containersToPush: [$()],
    collapsed: true,
    backText: '',
    backItemIcon: 'fa fa-reply',
    menuHeight: '100%',
    onExpandMenuStart: function () {
        _icon.addClass('fa-times').removeClass('fa-reorder');
        _menu.fadeOut();
    },
    onMenuReady: function () {
        _icon.addClass('fa-reorder').removeClass('fa-times');
        _menu.fadeIn();
    }
});

我不确定是否有办法在另一个回调函数中触发onMenuReady回调

如果这有帮助的话，我可以在问题中添加HTML，但一切都是现成的

编辑

值得一提的是，我制作了一把小提琴，展示了我在导航元素上的原始功能。这几乎是完全可行的，例外是当您深入到更深的导航项（选择“激励”，然后选择其中一个子菜单）时，当您尝试关闭导航时，在最后一步中不会切换类）。以下是此函数的jquery：

_icon.on('click',function(){
    if($('.multilevelpushmenu_inactive')[0]){
        _menu.fadeOut();
         $(this).addClass('fa-times').removeClass('fa-reorder');
    }else{
        _menu.delay(500).fadeIn();
        $(this).addClass('fa-reorder').removeClass('fa-times');
    }
});

---

我认为解决方案是检查

oncollapsemennd

回调中活动菜单的当前级别，如果

null

则可以将图标更改为

fa reorder

以下代码阻止在关闭最后一级之前更改关闭图标：

    onCollapseMenuEnd: function (options) {
        var level = _leftMenu.multilevelpushmenu('activemenu').data('level');
        console.log('collapsing start.. level=' + level);
        if (level === null) {
            console.log('inactive');
            _icon.addClass('fa-reorder').removeClass('fa-times');
            _menu.fadeOut()
        }
    }

请在下面和此处找到演示

不知道是否有更简单或更好的方法，但它似乎像你想要的那样工作

（带有click处理程序的活动类只是一个测试。我首先认为您需要这样的东西。）

这里的演示与小提琴中的有点不同，不知道为什么。但图标的变化就像小提琴一样

$（文档）.ready（函数（）{
//全局变量
var _leftMenu=$（“#leftMenu”）；
var _icon=_leftMenu.find（'.fa'）；
var _menu=_leftMenu.find（'.vert'）；
//获取加载所有内容后的实际文档高度
chHeight=函数（）{
var fullHeight=Math.max（$（document.height（））；
_css（'min-height'，fullHeight）；
};
//按钮菜单选项
_leftMenu.multilevelpushmenu({
containersToPush:[$（）]，
对,，
背景文本：“”，
backItemIcon:'fa fa reply'，
menuHeight：“100%”，
onExpandMenuStart:函数（选项）{
console.log（选项）；
变量级别=_leftMenu.multilevelpushmenu（'activemenu'）。数据（'level'）；
log（'expansing start..level='+level）；
_icon.addClass（'fa-times'）。removeClass（'fa-reorder'）；
_菜单淡出（）；
},
OnCollapSemenud：功能（选项）{
变量级别=_leftMenu.multilevelpushmenu（'activemenu'）。数据（'level'）；
log（'折叠开始..级别='+级别）；
如果（级别===null）{
console.log（'inactive'）；
_icon.addClass（'fa-reorder'）。removeClass（'fa-times'）；
_menu.fadeIn（）
}
},
onMenuReady:函数（）{
_icon.addClass（'fa-reorder'）。removeClass（'fa-times'）；
_menu.fadeIn（）；
},
onItemClick:函数（）{
//第一个参数是原始事件对象
变量事件=参数[0]，
//第二个参数是包含单击项（元素）的菜单级对象
$menuLevelHolder=参数[1]，
//第三个参数是单击项（
元素）
$item=参数[2]，
//第四个参数是实例设置/选项对象
选项=参数[3]；
//你可以在这里做一些很酷的事情
//重定向到href位置
//比如记录事件，甚至
//正在向href添加一些参数，等等。。。
$（'li'）.removeClass（'active'）；//重置任何活动元素
$item.addClass（'active'）；//设置active类
//锚href
//var itemHref=$item.find（'a:first'）.attr（'href'）；
//重定向页面
//location.href=itemHref；
}
});
$（document）.bind（'DOMNodeInserted ajaxComplete'，函数（）{
chHeight（）；
});
});
正文{
字体系列：Helvetica、Arial、无衬线字体；
}
/*第1525行，../sass/layout/_ReWork.scss*/
.multilevelpushmenu\u包装器{
位置：绝对位置；
溢出：隐藏；
最小宽度：100%；
最小高度：100%；
保证金：0；
填充：0；
}
/*第1533行，../sass/layout/_ReWork.scss*/
.multi-levelpushmenu_wrapper.levelHolderClass{
位置：绝对位置；
溢出：隐藏；
排名：0；
背景：#1A1A；
宽度：自动；
最小高度：100%；
字体系列：无衬线；
字号：1em；
缩放：1；
}
/*第1545行，../sass/layout/_ReWork.scss*/
.multilevelpushmenu\u包装。multilevelpushmenu\u未激活{
背景：#1A1A；
}
/*第1549行，../sass/layout/_ReWork.scss*/
.multilevelpushmenu_包装器h2{
字号：1em；
线高：1米；
字体大小：正常；
颜色：#fff；
填充：0 30px；
}
/*第1556行，../sass/layout/_ReWork.scss*/
.multi-levelpushmenu_包装h2.icon-heading{
填充：0.4em 0.4em；
}
/*第1560行，../sass/layout/_ReWork.scss*/
.multi-levelpushmenu\i{
位置：相对位置；
顶部：-5px；
右：4px；
字号：1.5em；
}
/*第1568行，../sass/layout/_ReWork.scss*/
.多级按钮菜单{
列表样式：无；
衬垫