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

Posted 2023-05-09

【中文标题】多级子菜单不会在点击时关闭子菜单

【英文标题】：Multi-level sub-menu not closing children on click

【发布时间】：2018-03-14 10:50:35

【问题描述】：

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

这是项目：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');
    
);

我该如何解决这个问题？

【参考方案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');
    
);

【讨论】：

这不适用于 3 个或更多子菜单级别。尝试在使用脚本时打开“Zonnepanelen / Montagemateriaal”。