Блог

Я использую 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') amp;amp; 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>

  

В этом примере, если я выбираю «Основные ключи», то меню «Разработка» и «Инвентаризация» одновременно расширяются и становятся активными, но выбор основных ключей не помечен как активный.

Надеюсь, кто-нибудь сможет помочь!

Оказывается, следующая строка после вызова updateMenu() исправляет это:

документ.querySelector( #menu a[href="${window.location.pathname.split('/').pop()}"] ).classList.add(‘активный’);