Mmenu - 如何检测关闭的回调事件?
Mmenu - How do I detect the closed call back event?
我正在使用 Jquery Mmenu plugin,我想检测关闭回调事件何时发生,以便我可以从我的汉堡菜单中删除 css class。我有打开和关闭菜单的相同汉堡菜单图标,我在菜单打开时添加了一个 is-active
class 但我需要检测整个菜单何时关闭以便我可以删除 class 我好像想不通。
这是我目前拥有的:
document.addEventListener(
"DOMContentLoaded", () => {
const menu = new Mmenu( "#mobile-menu", {
"extensions": [
"position-front"
],
scrollBugFix: {
fix: true
},
});
const api = menu.API;
const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener(
"click", ( evnt ) => {
evnt.preventDefault();
hamburger.classList.add("is-active");
});
}
);
[1]: https://mmenujs.com/
我在这个问题的评论中找到了我的问题的答案:
添加:
// When the open callback event is fired bind to it and add the class
api.bind('open:after', function (){
hamburger.classList.add('is-active');
console.log('open')
})
// When the closed callback event is fired bind to it and remove the class
api.bind('close:after', function(){
hamburger.classList.remove("is-active");
console.log('closed')
})
The documentation for the plugin is good but not that great so I struggled for a while before seeing this. Maybe it can help someone else.
I am using the latest version of the plugin and that is 8 something.
我正在使用 Jquery Mmenu plugin,我想检测关闭回调事件何时发生,以便我可以从我的汉堡菜单中删除 css class。我有打开和关闭菜单的相同汉堡菜单图标,我在菜单打开时添加了一个 is-active
class 但我需要检测整个菜单何时关闭以便我可以删除 class 我好像想不通。
这是我目前拥有的:
document.addEventListener(
"DOMContentLoaded", () => {
const menu = new Mmenu( "#mobile-menu", {
"extensions": [
"position-front"
],
scrollBugFix: {
fix: true
},
});
const api = menu.API;
const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener(
"click", ( evnt ) => {
evnt.preventDefault();
hamburger.classList.add("is-active");
});
}
);
[1]: https://mmenujs.com/
我在这个问题的评论中找到了我的问题的答案:
添加:
// When the open callback event is fired bind to it and add the class
api.bind('open:after', function (){
hamburger.classList.add('is-active');
console.log('open')
})
// When the closed callback event is fired bind to it and remove the class
api.bind('close:after', function(){
hamburger.classList.remove("is-active");
console.log('closed')
})
The documentation for the plugin is good but not that great so I struggled for a while before seeing this. Maybe it can help someone else.
I am using the latest version of the plugin and that is 8 something.