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

Question

在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()。如何解决？

Answer 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);
});

Answer 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);
});