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

Question

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

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

我几乎没有尝试过，但它并没有达到预期的效果。

我到目前为止所拥有的一切。如果不起作用，下面是一个代码片段：

​

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>

​

Answer 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');

下面是沿着同样的路线的演示。