Question

我在网站上使用MentisMenu，并且试图将活动菜单选择设置为活动状态。我可以激活菜单和子菜单来进行激活和扩展，但是所选的实际链接不会被标记为活动。有人吗？

      const currentLinkParents = currentLink => {
                let target = currentLink
                let parent = []
                while (target) {
                    // Get only nav-link
                    if (target.classList.contains('nav-item')) parent.unshift(target.querySelector('.nav-link'))
                    // Stop on treeview
                    if (target.classList.contains('treeview')) break
                    target = target.parentNode
                }
                return parent
            }
            const updateMenu = currentLink => {
                document.querySelectorAll('#menu .active').forEach(i => i.classList.remove('active', 'show'))

                for (const i of currentLinkParents(currentLink)) {
                    i.classList.add('active')
                    i.classList.contains('treeview-toggle') && i.classList.add('show')
                }
            }
            updateMenu(document.querySelector(`#menu a[href="${window.location.pathname.split('/').pop()}"]`))

此处提供HTML示例：


      <li class="nav-item">
         <a class="nav-link has-icon treeview-toggle" href="#"><i class="material-icons">construction</i>Engineering</a>
          <ul class="nav">
               <li><a href="renovations_active.aspx" class="nav-link">Active Renovations</a></li>
                <li><a href="maintenance_requests.aspx" class="nav-link">Maintenance Requests</a></li>
                 <li><a href="projects.aspx" class="nav-link">Projects</a></li>
                 <li><a href="unit_recurring_events.aspx" class="nav-link">Recurring Events</a></li>
    
                    <li class="nav-item">
                      <a href="javascript:void(0)" class="nav-link treeview-toggle">Inventories</a>
                       <ul class="nav">
                         <li><a href="inventory_management.aspx" class="nav-link">Stock Inventory</a></li>
                          <li><a href="key_inventory.aspx" class="nav-link">Master Keys</a></li>
                             </ul>
                               </li>
                                 </ul>
                                 </li>

在此示例中，如果我选择“主键”，则“工程”和“库存”菜单都将展开并被设置为活动状态，但是“主键”选项未标记为活动状态。

希望有人可以提供帮助！

Answer 1

在对updateMenu（）的调用对其进行修复之后，将以下行显示出来：

document.querySelector（#menu a[href="${window.location.pathname.split('/').pop()}"]）。classList.add（'active'）;

在菜单中选择当前链接

1 个答案: