javascript - 基于 url 的活动/折叠类不适用于子菜单

Question

如果 href 等于 url，我有下面的代码将 .active 类添加到链接。它适用于菜单项，但对于子菜单项它不能正常工作。例如，如果单击带有文本“收件箱消息”的链接，我想将 .active 类添加到带有文本“消息”的主链接。但它不起作用，你知道如何实现吗？还有javascript代码？

HTML

<li class="navbar-vertical-aside-has-menu ">
                  <a class="js-navbar-vertical-aside-menu-link nav-link nav-link-toggle " href="javascript:;" title="Messages">
                    <i class="fal fa-comment" style="font-size: 20px; padding:0 13px 0 10px"></i>
                    <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Messages</span>
                  </a>
      
                  <ul class="js-navbar-vertical-aside-submenu nav nav-sub">
                    <li class="{{ (request()->segment(1) == 'inboxes') ? 'active' : '' }}">
                      <a class="nav-link " href="{{ route('sms.inboxes') }}" title="Inbox Message">
                        <span class="tio-circle nav-indicator-icon"></span>
                        <span class="text-truncate">Inbox Message</span>
                      </a>
                    </li>
                    <li class="{{ (request()->segment(1) == 'outboxes') ? 'active' : '' }}">
                      <a class="nav-link " href="{{ route('sms.outboxes') }}" title="Outbox Message">
                        <span class="tio-circle nav-indicator-icon"></span>
                        <span class="text-truncate">Outbox Message</span>
                      </a>
                    </li>
                    <li class="{{ (request()->segment(1) == 'sent-message') ? 'active' : '' }}">
                      <a class="nav-link " href="{{ route('sms.sents') }}" title="Sent Message">
                        <span class="tio-circle nav-indicator-icon"></span>
                        <span class="text-truncate">Sent Message</span>
                      </a>
                    </li>
                  </ul>
                </li>

JS：

      const currentLocation = location.href;
      const menuItem = document.querySelectorAll('a');
      const menuLength = menuItem.length
      for (let i = 0; i<menuLength; i++){
        if(menuItem[i].href === currentLocation){
          menuItem[i].className = "js-nav-tooltip-link nav-link active"
        }
      }