Javascript 更改当前页面的菜单背景色

我有一个带有子菜单的菜单
html

<ul class="nav navbar-nav float-xs-right top-nav">
   <li class="nav-item"><a class="nav-link" href="/our-work/">Our Work</a></li>
   <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="/what-we-do/">What We Do</a>
          <div class="dropdown-menu">
              <a class="dropdown-item" href="/what-we-do/we-develop/">We Develop</a>
              <a class="dropdown-item" href="/what-we-do/we-promote/">We Promote</a>
              <a class="dropdown-item" href="/what-we-do/we-support/">We Support</a>
          </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="/contact/">Contact</a></li>
</ul>

function activeMenu() {
    var curr_url = window.location.pathname ;
    var curr_menu = $("a[href$='" + curr_url + "']");
    $(curr_menu).css("background", "#fff");
}
activeMenu();

它正在更改标签的背景颜色，如果它是子菜单，则子菜单的背景颜色正在更改。
但我想更改父菜单的背景颜色，而不是子菜单
使用jQuery选择父菜单是否有可能的解决方案？

请参阅此jQuery方法：

在你的情况下，我想这就是你想要的

function activeMenu() {
    var curr_url = window.location.pathname ;
    var curr_menu = $("a[href$='" + curr_url + "']");
    $(curr_menu).parent(".dropdown-toggle").css("background", "#fff");
}
activeMenu();

---

您可以使用香草javascript实现这一点。假设您的

的id为“菜单”：

const menu = document.getElementById("menu").children;
const list =  [...menu]
const currentPage = list.filter(li => li.children[0].pathname == window.location.pathname)
currentPage[0].className = "active"