Выделите ссылку в боковой панели на странице

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(); 
    } 
    }); 

}); 

Как я могу сделать меню красным фоном с автоматическим расширением nav?

Answer 1

window.location.href и <a> tag's href не совсем такие же. Вместо этого используйте функцию indexOf().

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

Answer 2

Для того, чтобы достичь того, что вы ищете, вот варианты:

Вариант 1: Использование абсолютного URL:

Проверить, если значение 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: Использование относительного URL:

Проверить, если значение 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/