更改当前页面的菜单背景颜色答案

【问题标题】：Change menu background color for current page更改当前页面的菜单背景颜色
【发布时间】：2017-05-31 13:43:52
【问题描述】：

我有一个带有子菜单的菜单
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>

我正在使用 jQuery 添加背景颜色

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

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

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案1】：

您可以使用原版 javascript 做到这一点。假设您的 <ul> 的 id 为“menu”：

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"

【讨论】：

【解决方案2】：

查看这个 jQuery 方法：https://api.jquery.com/parent/

在你的情况下，我认为这就是你要找的；

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

【讨论】：