javascript - 在菜单中选择当前链接

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>

在这个例子中，如果我选择“Master Keys”，那么菜单 Engineering 和 Inventories 都会展开并设置为活动状态，但 Master Keys 选项没有标记为活动状态。

希望有人能帮忙！

标签： javascript

Answer 1

在调用 updateMenu() 修复它后，结果如下：

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