mmenu wordpress插件-绑定打开/关闭事件

Question

我正在使用许可wordpress插件版本3.1.0。

我有菜单工作，但我不能访问mmenu来触发按钮打开/关闭效果，我想要使用。以前，我使用的是mmenu核心版本，而不是WP插件，并使用以下方式触发了类更改：

var $menu = $("#menu").mmenu({...})
var API = $menu.data("mmenu");
API.bind("open:finish", function () {
    $("#menu-btn").addClass("is-active");
});
API.bind("close:finish", function () {
    $("#menu-btn").removeClass("is-active");
});

修改var API以使用未定义的插件生成的id失败，可能是因为菜单创建是在另一个脚本中管理的。

var API = $('#mm-1').data("mmenu"); //'mm-1' - the plugin generated mmenu id

我也尝试使用jQuery直接对#菜单-btn，但它不会被触发，除非我删除#菜单-btn从菜单设置。例如，没有复制，只是一个粗略的例子，所以请忽略语法错误。

$("#menu-btn").click(function(){console.log('click')});

我所需要的只是在打开的菜单链接id= menu中添加/删除一个' is -active‘类。

Answer 1

当打开时，mmenu会添加一个body类，因此添加了一个突变观察者来检查是否有..mm包装打开的类。如果是这样的话，将'is-active‘类添加到菜单图标(它使用.hamburger类)，如果没有，则删除它。

if ($('body').hasClass('mm-wrapper--opened')){
  $('.hamburger').addClass("is-active");
}
        
const targetNode = document.body;
const config = { childList : true, attributes: true };
        
const callback = function(mutationsList, observer) {
  for(let mutation of mutationsList) {
    if (mutation.type === 'attributes') {
      if ($('body').hasClass('mm-wrapper--opened')){
        setTimeout(() => {  $('.hamburger').addClass("is-active"); }, 500);
      }
      else {
        $('.hamburger').removeClass("is-active");
      }
    }
  }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);