Question

我正在处理一个菜单，该菜单仅在点击时显示子菜单，而不是在悬停时。我在网上找到了很多代码，但下面的代码更干净，而且有效。问题是，当我点击子菜单项时，它关闭菜单并且不打开URL。

由于代码非常简洁，我知道这必须是一个我无法看到的小细节。

$(document).ready(function() {
    $(".menu-item-has-children").click(function() {
        event.stopPropagation();
        event.preventDefault();
        $('.menu-item-has-children > .sub-menu').not($(this).children(".sub-menu").toggle()).hide();
    });
});

感谢您的帮助！

Answer 1

event.stopPropagation();
event.preventDefault();

行导致跟随链接的默认行为不起作用。

当事件从内部元素冒泡时，这些也会触发。为了检查是否应该触发它们，您可以执行以下操作

$(document).ready(function () {
    $(".menu-item-has-children").click(function (e) {
        if ($(e.target).closest('li').hasClass('menu-item-has-children')) {
            e.stopPropagation();
            e.preventDefault();
        }
        $('.menu-item-has-children > .sub-menu').not($(this).children(".sub-menu").toggle()).hide();
    });
});

这将检查触发事件的实际元素。

子菜单关闭菜单

1 个答案: