Определение текущей страницы для аккордеон меню

[Pichenka94]

Доброго времени суток! Уже часа 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">&nbsp;&nbsp;</em> Категория 1 </a></strong>
<ul class="liste-produits">
<li><a href="/категория1/подкатегория1.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Подкатегория 1</a></li>
<li><a href="/категория1/подкатегория2.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Подкатегория 2</a></li>
<li><a href="/категория1/подкатегория3.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Подкатегория 3</a></li>
</ul>
</li>


<li><strong class="categories-item"><a><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Категория 2 </a></strong>
<ul class="liste-produits">
<li><a href="/категория2/подкатегория1.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Подкатегория 1</a></li>
<li><a href="/категория2/подкатегория2.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Подкатегория 2</a></li>
<li><a href="/категория2/подкатегория3.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Подкатегория 3</a></li>
</ul>
</li>


<li><strong class="categories-item"><a><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Категория 1 </a></strong>
<ul class="liste-produits">
<li><a href="/категория3/подкатегория1.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Подкатегория 1</a></li>
<li><a href="/категория3/подкатегория2.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Подкатегория 2</a></li>
<li><a href="/категория3/подкатегория3.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</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');
    });

[void()]

Что-то вроде этого?

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

[Pichenka94]

Как я понимаю это собирает все ссылки которые будут идти вот так ?

<li><a href="/категория3/подкатегория1.html" class="produit-item"><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Подкатегория 1</a></li>

Я совсем плох в JS как мне тут проставить после этого на элемент strong класс active чтобы строка

<li><strong class="categories-item"><a><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Категория 1 </a></strong>

превращалась в такую

<li><strong class="categories-item active"><a><em class="fa fa-chevron-circle-right">&nbsp;&nbsp;</em> Категория 1 </a></strong>

[void()]

Нет, на первой строчке выбираются все ссылки, которые содержатся в '.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');
	}
}

[Pichenka94]

Таким образом оно выдает классы сразу всем подпунктам, задумка в том чтобы оно выдавала класс той ссылке на которой находишся в данный момент, но класс должен присваиватся на 2 родителя выше и к элементу strong.

P.S.
Спасибо за полезную информацию по тому как собирать ссылки,раньше в некоторых моментах очень могло пригодится.

[void()]

Чтобы задать класс самой ссылке, на 6 строчке можно так:

arrLinks[i].classList.add('active');

Не знаю, может кто-нибудь подскажет еще варианты.