子菜单处于活动状态时更改 UberMenu 顶级菜单图标答案

【问题标题】：Change UberMenu top level menu icon when submenu is active子菜单处于活动状态时更改 UberMenu 顶级菜单图标
【发布时间】：2022-11-12 05:56:11
【问题描述】：

我正在为 WordPress 网站使用 UberMenu 插件。 link 有一个示例菜单。我有完全相同的，但是子菜单不会在悬停时打开，而是在单击时打开。如何在子菜单打开时将第一个菜单项（The Works）上的图标类别从（fa-cog）更改为（fa-bars），并在子菜单关闭时将其返回。我尝试将其绑定到菜单项上的鼠标单击事件，但事实是您只需单击它旁边的即可关闭子菜单，然后图标不会变回原来的样子。函数 (openSubmenu) 和 (closeSubmenu) 在那里调用，但我的 JS 级别太低，无法弄清楚如何将类更改附加到它们。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

UPD：找到了这个解决方案：

var menuItem = document.getElementById("menu-item-5796");
var menuIcon = document.querySelector("i.ubermenu-icon");

var mutationConfig = { 
    attributes: true, 
    attributeFilter: ['class']
};

var onMutate = function(mutationsList) {
    mutationsList.forEach(mutation => {
        if(menuItem.classList.contains('ubermenu-active')){
            menuIcon.classList.add('fa-bars');
            menuIcon.classList.remove('fa-cog');
        } else {
            menuIcon.classList.add('fa-cog');
            menuIcon.classList.remove('fa-bars');
        }
    });
};

【讨论】：