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

ng-if和window.location.href代码<a>不完全相同。请改用href功能。

indexOf()

Answer 2

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

选项1：使用绝对网址：

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

<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的值是否包含href标记的anchor值。

<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/

根据页面突出显示侧栏中的链接

2 个答案: