WordPress付费版mmenu插件如何绑定菜单开关事件控制按钮样式？

针对你遇到的无法通过API绑定菜单开关事件、按钮点击无效的问题，提供以下几个可行方案：

方案1：监听mmenu初始化事件获取API #

付费版WP mmenu插件会在菜单初始化完成后触发mmenu-init事件，通过这个事件可以拿到正确的菜单实例和API：

jQuery(document).ready(function($) {
    // 监听菜单初始化完成事件
    $(document).on('mmenu-init', function(e, $menu) {
        var API = $menu.data('mmenu');
        if (API) {
            // 绑定菜单打开完成事件
            API.bind('open:finish', function() {
                $('#menu-btn').addClass('is-active');
            });
            // 绑定菜单关闭完成事件
            API.bind('close:finish', function() {
                $('#menu-btn').removeClass('is-active');
            });
        }
    });
});

这个方案是最可靠的，直接利用插件内置的事件机制，能保证按钮状态和菜单状态完全同步。

方案2：事件委托绑定按钮点击（应急替代） #

如果直接绑定按钮点击无效，说明插件接管了按钮的事件处理，改用事件委托绑定到父元素（比如document）：

jQuery(document).ready(function($) {
    $(document).on('click', '#menu-btn', function(e) {
        e.preventDefault();
        // 直接切换类名
        $(this).toggleClass('is-active');
    });
});

注意：这个方案可能存在状态不同步的问题（比如用户点击遮罩关闭菜单时，按钮类名不会自动移除），仅作为临时替代方案使用。

方案3：监听菜单DOM类变化同步状态 #

mmenu打开/关闭时，会给菜单容器添加/移除mm-open类（不同版本可能略有差异，可通过浏览器开发者工具确认），用MutationObserver监听这个类的变化来同步按钮状态：

jQuery(document).ready(function($) {
    var $menu = $('#mm-1'); // 替换为插件生成的实际菜单ID
    var $btn = $('#menu-btn');

    // 创建观察者实例
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'class') {
                $btn.toggleClass('is-active', $menu.hasClass('mm-open'));
            }
        });
    });

    // 开始监听菜单容器的类属性变化
    observer.observe($menu[0], {
        attributes: true,
        attributeFilter: ['class']
    });
});

这个方案不依赖插件API，兼容性较强，适合API无法获取的场景。

如果以上方案都无法解决问题，建议查看付费版插件的官方文档，或联系插件官方支持获取针对性帮助。

内容的提问来源于stack exchange，提问作者ice70