Question

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

$( '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);
});

绑定到WP菜单项的Toggle（）可防止单击子菜单项

2 个答案: