Toggle() 绑定到 WP 菜单项防止点击子菜单项答案

【问题标题】：Toggle() binded to WP menu item prevents clicking on sub-menu itemsToggle() 绑定到 WP 菜单项防止点击子菜单项
【发布时间】：2015-03-12 09:52:51
【问题描述】：

在my WP page 我有一个自定义菜单，其中一个项目（“收藏”）有一个子菜单，默认情况下它是隐藏的，并在通过此代码单击“收藏”时显示：

$( 'li.item_collection' ).toggle(function() {
    $( 'li.item_collection .sub-menu' ).slideDown( { duration: 200, easing: 'easeInOutExpo' } );
    }, function() {
    $( 'li.item_collection .sub-menu' ).slideUp(100);
    });

问题是，我无法单击子菜单项，因为这样做会触发绑定到“COLLECTIONS”项的toggle()。如何解决？

【问题讨论】：

标签： jquery wordpress menu toggle

【解决方案1】：

你需要阻止点击事件在 DOM 树上冒泡：

$( 'li.item_collection .sub-menu' ).click(function(e) {
   e.stopPropagation();
});

More info on e.stopPropagation()

我还将您的切换代码更改为以下内容，以便它仅切换单击项目的子菜单：

$( 'li.item_collection' ).toggle(function() {
    $(this).find( '.sub-menu' ).slideDown( { duration: 200, easing: 'easeInOutExpo' } );
}, function() {
    $(this).find( '.sub-menu' ).slideUp(100);
});

【讨论】：

【解决方案2】：

我建议使用更具体的选择器，例如 id，以便仅定位最高级别的可扩展菜单。目前，您的代码绑定到也适用于子菜单的所有 li.item_collection。另一种方法是获取被点击元素的类并检查该类不包含子菜单或检查被点击元素的子元素。

最简单的是id选择器：

<li class="item_collection" id="highLevelMenu">
   ......
</li>

在这种情况下，jquery 应该是：

$( '#highLevelMenu' ).toggle(function() {
  $( 'li.item_collection .sub-menu' ).slideDown( { duration: 200, easing: 'easeInOutExpo' } );
}, function() {
  $( 'li.item_collection .sub-menu' ).slideUp(100);
});

【讨论】：

这仍然会出现与.sub-menu 是#highLevelMenu 的一部分相同的问题，因此单击它仍会触发切换