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

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

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

最简单的是 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);
});

Answer 2

您需要停止在 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);
});

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

Toggle() binded to WP menu item prevents clicking on sub-menu items

jquery

wordpress

menu

toggle