在子页面上也突出显示父菜单答案

【问题标题】：Highlight Parent Menu when on child page also在子页面上也突出显示父菜单
【发布时间】：2015-10-04 06:28:37
【问题描述】：

我有一个简单的多级菜单和一个脚本，可以突出显示菜单项，无论是父菜单还是子菜单。

在下面的示例中，当我在子页面上时，它只会更改子页面的颜色，而我也想更改颜色或其父项。

我尝试了一些东西，但它没有按预期工作。

Here's a codepen 到目前为止我所拥有的。如果这不起作用，这里有一个代码 sn-p：

jQuery(document).ready(function() {
  var url = window.location.href;
  $('#cssmenu a[href="' + url + '"]').addClass('active-menu');

  // Will also work for relative and absolute hrefs
  $('#cssmenu a').filter(function() {
    return this.href == url;
    $(this).parents("li a").addClass('active-menu');
  }).addClass('active-menu');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
  <div id="menu-button"></div>
  <ul>
    <li><a href="/en/about-us/">About Us</a>
    </li>
    <li class="has-sub">
      <span class="submenu-button"></span><a href="#">Gallery </a>
      <ul>
        <li><a href="/en/photo-gallery/" class="active-menu">Photo Gallery</a>
        </li>
        <li><a href="/en/video-gallery">Video Gallery</a>
        </li>
        <li><a href="/en/instagram-gallery">Instagram Gallery</a>
        </li>
      </ul>
    </li>
    <li><a href="/en/news/">News</a>
    </li>
    <li><a href="/en/contact/">Contact</a>
    </li>
  </ul>
</div>

更新

这是我的新代码，但它可以工作，但也会使其他链接保持突出显示：

$('#cssmenu a').filter(function() {
  $(this).parents("li.has-sub").find('a:first').addClass('active-menu');
  return this.href == url;
}).addClass('active-menu');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
  <div id="menu-button"></div>
  <ul>
    <li><a href="/en/about-us/">About Us</a>
    </li>
    <li class="has-sub">
      <span class="submenu-button"></span><a href="#">Gallery </a>
      <ul>
        <li><a href="/en/photo-gallery/" class="active-menu">Photo Gallery</a>
        </li>
        <li><a href="/en/video-gallery">Video Gallery</a>
        </li>
        <li><a href="/en/instagram-gallery">Instagram Gallery</a>
        </li>
      </ul>
    </li>
    <li><a href="/en/news/">News</a>
    </li>
    <li><a href="/en/contact/">Contact</a>
    </li>
  </ul>
</div>

【问题讨论】：

您的笔无法使用，因为那里没有添加 jquery。这是更新后的 Pen 以及这个 filter $('#cssmenu a').filter(function () { in第一行你有return 声明..所以下面的任何内容都行不通......我在上面给出的笔中改变了同样的东西..
你的脚本中断没有做任何事情
它就像你提供了你的笔兄弟的链接一样。我刚刚添加了jquery并移动了return statement..
我不确定 CodePEn 是什么，我提供的脚本可以工作，但不会更改父菜单的类，以防子页面被选中
看它不是addClass，因为你在filter里面有return statement，它只会返回执行并且不会执行任何附加到它的东西..所以addClass到@ 987654337@ 将不起作用..

标签： javascript jquery html css menu

【解决方案1】：

我猜，这就是你想要的。

var $menu = $("#cssmenu");
//Get the anchor based on the page URL
var $current = $menu.find('a').filter(function() {
    return location.href.indexOf(this.href) > -1;
    //Or (whatever works)
    //return location.href === this.href;
});
//Add it's parent's anchor
$current = $current.add($current.closest("li.has-sub").find(' > a'));
//Set the desired class
$current.addClass('active-menu');

这里是a demo，与此相同。

【讨论】：