Доброго времени суток! Уже часа 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');
});