多级子菜单不会在点击时关闭子菜单

Question

现在我正在开发一个基于点击而不是悬停的多级子菜单。打开另一个子菜单时，我在关闭子子菜单时遇到问题。打开另一个子菜单时，必须关闭所有二级子菜单。

这是项目：https://dev.webrandcreative.nl/bespaarbazaar/。单击“Productcategorieën”按钮以显示菜单。单击“Zonnepanelen”，然后立即单击“Verlichting”。您会看到“Zonnepanelen”子菜单没有关闭。

这是我的代码：

jQuery('.navigation li.menu-item-has-children > a').click(function (e) {
    e.preventDefault();
    if (!jQuery(this).parent().hasClass('open-submenu')) {
        jQuery(this).parent().parent().find('.open-submenu').removeClass('open-submenu');
        jQuery(this).parent().addClass('open-submenu');
    } else {
        jQuery('.navigation li').removeClass('open-submenu');
        jQuery(this).parent().removeClass('open-submenu').find('.open-submenu').removeClass('open-submenu');
    }
});

我该如何解决这个问题？

Answer 1

这是因为您没有关闭已经打开的子菜单。

在这一行：

jQuery(this).parent().parent().find('.open-submenu').removeClass('open-submenu');

parent().parent() 仅达到特定.sub-menu 的.menu-item 级别。因此不会关闭来自其他.menu-items 的任何.open-submenu。

因此，请确保在打开新的 .open-submenu 之前关闭所有现有的 .open-submenu。

以下代码应该可以工作：

jQuery('.navigation li.menu-item-has-children > a').click(function (e) {
    e.preventDefault();
    if (!jQuery(this).parent().hasClass('open-submenu')) {
        jQuery('.navigation').find('.open-submenu').removeClass('open-submenu');
        jQuery(this).parent().addClass('open-submenu');
    } else {
        jQuery(this).parent().removeClass('open-submenu').find('.open-submenu').removeClass('open-submenu');
    }
});