javascript - Wordpress 点击子菜单关闭当前子菜单

Question

我有以下用于移动菜单的 javascript，它工作正常，但是当单击具有另一个子菜单的子菜单项时，它不仅会关闭该子菜单，还会关闭父子菜单。希望这是有道理的。关于如何让它只关闭子菜单而不是父子菜单的任何想法？

jQuery('.mobile-menu .sub-menu').hide();
jQuery(document).ready(function () {
jQuery('.mobile-menu .sub-menu').parent().find('a:first').removeAttr('href').css('cursor','default');

if (jQuery('.mobile-menu .menu-item-has-children').length > 0) {
    jQuery('.mobile-menu .menu-item-has-children').click(
    function (event) {
        jQuery(this).addClass('toggled')
        if (jQuery(this).hasClass('toggled')) {
            jQuery(this).children('ul').toggle();
        }
    });
}
});

Answer 1

从这里我猜你需要 event.stopPropagation() 如下:

jQuery('.mobile-menu .sub-menu').hide();
jQuery(document).ready(function () {
jQuery('.mobile-menu .sub-menu').parent().find('a:first').removeAttr('href').css('cursor','default');

if (jQuery('.mobile-menu .menu-item-has-children').length > 0) {
    jQuery('.mobile-menu .menu-item-has-children').click(
    function (event) {
        event.stopPropagation();
        jQuery(this).addClass('toggled')
        if (jQuery(this).hasClass('toggled')) {
            jQuery(this).children('ul').toggle();
        }
    });
}
});

* 更新 * 我想这对我来说就是那些日子之一。在我回答了这个问题之后(顺便说一句，谢谢你的观点)，在我的脑海里，我记得有人建议停止传播是有效的，但你在使用它时应该小心。我花了一点 Google-fu 来复原问题所在。在 this article 中有很好的说明，但 TL;DR 可能会产生意想不到的副作用。 This entry at jQuery Fundamentals有一些其他的想法。如果它对你有用，那太棒了，但你可能想把它放在脑后以防万一。