Определение текущей страницы для аккордеон меню
Доброго времени суток! Уже часа 3 пытаюсь сделать так чтобы в аккордеон меню (код ниже) при загрузке страницы разворачивалась та часть что содержит пункт с текущей страницей. Но моих знаний JS катострофически не хватает, помогите пожалуйста ввести данную фичу.
HTML составляющая: <nav id="main" class="menu_boutique-area"> <ul class="liste-categories"> <li><strong class="categories-item"><a><em class="fa fa-chevron-circle-right"> </em> Категория 1 </a></strong> <ul class="liste-produits"> <li><a href="/категория1/подкатегория1.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 1</a></li> <li><a href="/категория1/подкатегория2.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 2</a></li> <li><a href="/категория1/подкатегория3.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 3</a></li> </ul> </li> <li><strong class="categories-item"><a><em class="fa fa-chevron-circle-right"> </em> Категория 2 </a></strong> <ul class="liste-produits"> <li><a href="/категория2/подкатегория1.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 1</a></li> <li><a href="/категория2/подкатегория2.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 2</a></li> <li><a href="/категория2/подкатегория3.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 3</a></li> </ul> </li> <li><strong class="categories-item"><a><em class="fa fa-chevron-circle-right"> </em> Категория 1 </a></strong> <ul class="liste-produits"> <li><a href="/категория3/подкатегория1.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 1</a></li> <li><a href="/категория3/подкатегория2.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 2</a></li> <li><a href="/категория3/подкатегория3.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 3</a></li> </ul> </li> </ul> </nav> JS самого меню:
function menu_js() {
if(menu_ul.length > 0){
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
if (menu_current.length > 0){
if( menu_current.parent().attr('id') != "menu_mob" ){
menu_current.parent().show();
menu_current.parent().parent().addClass('activeLi');
}else{
menu_current.addClass('activeLi');
}
}
}
}
var menu_ul = $('#main .liste-produits'),
menu_a = $('#main .categories-item'),
menu_current = $('#main .current'),
menu_ul_first = $('#main .liste-categories li:first-child .liste-produits'),
menu_parent_open = $('#main .liste-categories li:first-child .categories-item');
menu_js();
А этим я просто добавляю цвет пункту в меню на текущую страницу:
$(document).ready(function () {
var url = window.location;
var element = $('ul.liste-produits a').filter(function () {
return this.href == url || url.href.indexOf(this.href) == 0;
});
$(element).parentsUntil('ul.sidebar-menu', 'li').addClass('active');
});
|
Что-то вроде этого?
// 1) Получить все ссылки
// 2) Получить текущую подкатегорию
// 3) Проверить на совпадение
var arrLinks = document.querySelectorAll('.liste-categories a');
var thisLinks = window.location.pathname.split('/')[2];
for(var i = 0; i <arrLinks.length; i++){
if(arrLinks[i].pathname.split('/')[2] == thisLinks){
// Элемент доступен по arrLinks[i]. Значит, нужно выловить его родителя и задать ему класс 'active'
}
}
|
Как я понимаю это собирает все ссылки которые будут идти вот так ?
<li><a href="/категория3/подкатегория1.html" class="produit-item"><em class="fa fa-chevron-circle-right"> </em> Подкатегория 1</a></li> Я совсем плох в JS как мне тут проставить после этого на элемент strong класс active чтобы строка <li><strong class="categories-item"><a><em class="fa fa-chevron-circle-right"> </em> Категория 1 </a></strong> превращалась в такую <li><strong class="categories-item active"><a><em class="fa fa-chevron-circle-right"> </em> Категория 1 </a></strong> |
Нет, на первой строчке выбираются все ссылки, которые содержатся в '.liste-categories'. То есть вообще все ссылки этого аккордеона.
На второй строчке получаем текущий URL страницы и вырезаем из него подкатегорию. Там уже в зависимости от структуры ваших урлов сами настраиваете с помощью индекса в квадратных скобках [?] - раздел, категорию, подкатегорию... Затем цикл проходит по всем имеющимся ссылкам и: - вырезает из всех ссылок опять же категорию/подкатегорию; - сравнивает с текущей категорией/подкатегорией; И в конце он находит ссылку, которая содержит текущую категорию и добавляет class='active' родителю родителя. То есть - liste-produits.
.active{
display:block!important;
}
А у вас liste-produits изначально должен быть скрыт:
.liste-produits{
display:none;
}
var arrLinks = document.querySelectorAll('.liste-categories a');
var thisLinks = window.location.pathname.split('/')[2];
for(var i = 0; i <arrLinks.length; i++){
if(arrLinks[i].pathname.split('/')[2] == thisLinks){
arrLinks[i].parentNode.parentNode.classList.add('active');
}
}
|
Таким образом оно выдает классы сразу всем подпунктам, задумка в том чтобы оно выдавала класс той ссылке на которой находишся в данный момент, но класс должен присваиватся на 2 родителя выше и к элементу strong.
P.S. Спасибо за полезную информацию по тому как собирать ссылки,раньше в некоторых моментах очень могло пригодится. |
Чтобы задать класс самой ссылке, на 6 строчке можно так:
arrLinks[i].classList.add('active');
Не знаю, может кто-нибудь подскажет еще варианты. |
| Часовой пояс GMT +3, время: 01:53. |