与小部件和菜单中的两个 jQuery 事件冲突

Question

我在 WordPress 中工作，并且在移动网站上有两个菜单，使用视口媒体查询来控制元素。当以 768 宽查看网站时，两个移动菜单取代了桌面。为了实现这一点，我在左上角的下拉菜单中使用了带有两个自定义菜单的小部件。

左侧的下拉小部件是嵌入的 Shortcodes Unlimited 短代码。

右边的主菜单只是一个基本菜单，使用来自http://www.codrops.com的jquery.dlmenu.js v1.0.1。

访问页面时，您可以单击左侧的下拉小部件，它会按预期工作。您也可以单击右侧的下拉菜单，它会按预期工作。但是，一旦单击右侧的下拉菜单，就无法单击左侧的下拉小部件。

mobile/jquery.dlmenu.js 先注册。

shortcodes-ultimate/assets/js/other-shortcodes.js 注册第二。

jQuery(function($) {
        $( "#dl-menu" ).dlmenu({
                animationClasses : { 
                   classin : "dl-animate-in-2", classout : "dl-animate-out-2" }
                        });
                    });

脚本全部加载在页脚中。

没有控制台错误。

http://iemajen.com/lexingtonhabitatforhumanity/

Answer 1

我认为问题出在jquery.dlmenu.js文件(themes/bonesv2/mobile/jquery.dlmenu.js);中的这一行

// clicking somewhere else makes the menu close
$body.off( 'click' ).on( 'click.dlmenu', function() {
    self._closeMenu() ;
} );

您的插件Shortcodes Unlimited 将点击侦听器绑定到body 标记，在这种情况下将点击事件侦听到.su-spoiler-title。但是在您的jquery.dlmenu.js 中，当您单击dlmenu 时，它会从body 取消绑定所有单击事件并绑定它自己的。

所以要确定这是问题所在，请尝试删除此.off('click') 命令：

// clicking somewhere else makes the menu close
$body.on( 'click.dlmenu', function() {
    self._closeMenu() ;
} );

如果出现问题，您可以尝试仅取消绑定'click.dlmenu' 事件：

// clicking somewhere else makes the menu close
$body.off( 'click.dlmenu' ).on( 'click.dlmenu', function() {
    self._closeMenu() ;
} );

附：您必须在 Inspector 中检查这是否会正确解除绑定。