基于页面在侧边栏中突出显示链接

Question

我正在构建一个侧边栏导航，用于跟踪您在网站上的位置。我有一个下拉菜单，当您将鼠标悬停在它上面时会展开。我希望导航栏中的链接突出显示以指示您在哪个页面上。我让它适用于父页面，但是如果您将鼠标悬停在下拉菜单上并选择一个子链接，则该链接不会突出显示并且不会自动展开菜单以显示您在该页面上。

我把我的代码放在 JSfiddle 中。 https://jsfiddle.net/6wrn5hgg/2/

这里是我正在使用的代码的快速浏览。

//Highlight current page
$(function() {
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('current');
    }
  });
});

//subbar menu drop down
$(document).ready(function() {

  $('li.parent').hover(function() {
    $(this).siblings().find('.subnav').slideUp();
    $(this).children('.subnav').slideDown();

    if ($(this).children('.subnav').slideDown() == window.location.href) {
      $(this).addClass('current').slideDown();
    }
  });

});

如何使菜单显示红色背景并自动展开导航？

Answer 1

为了实现您的目标，以下是选项：

选项1：使用绝对网址：

检查window.location.href的值是否与anchor标签的href的值完全相同。

<li class="parent"><a href="https://fiddle.jshell.net/_display/" class="">About Us <span class="caret"></span></a>  // with absolute url 

    $(document).ready(function() {

      $('.parent a').each(function() {
        if ($(this).prop('href') == window.location.href) {
           $(this).addClass('current');
           $(this).closest('.parent').find('ul.subnav').slideDown();
        }
      });

      $('li.parent').hover(function() {
        $(this).siblings().find('.subnav').slideUp();
        $(this).children('.subnav').slideDown();

        if ($(this).children('.subnav').slideDown() == window.location.href) {
          $(this).addClass('current').slideDown();
        }
      });

    });

例如：https://jsfiddle.net/DinoMyte/6wrn5hgg/4/

选项 2：使用相对网址：

检查window.location.href的值是否包含anchor标签的href的值。

<li class="parent"><a href="/_display/" class="">About Us <span class="caret"></span></a>  // with relative url



$(document).ready(function() {

  $('.parent a').each(function() {
    if (window.location.href.indexOf($(this).prop('href')) != -1) {
       $(this).addClass('current');
       $(this).closest('.parent').find('ul.subnav').slideDown();
    }
  });

  $('li.parent').hover(function() {
    $(this).siblings().find('.subnav').slideUp();
    $(this).children('.subnav').slideDown();

    if ($(this).children('.subnav').slideDown() == window.location.href) {
      $(this).addClass('current').slideDown();
    }
  });

});

例如：https://jsfiddle.net/DinoMyte/6wrn5hgg/5/

Answer 2

window.location.href 和<a> 标签的href 并不完全相同。请改用indexOf() 函数。

$('.parent > a').each(function() {
   if (window.location.href.indexOf(this.href) > -1) {
       $(this).addClass('current');
   }
});