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（）仅达到该特定.menu-item的{{1}}级别。因此不会关闭其他.sub-menu的任何.open-submenu。

因此，请确保在打开新的.menu-item之前关闭所有现有.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');
    }
});

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

1 个答案: