У меня есть меню уже с подсветкой активного пункта меню. Но если я делаю выпадающее меню то при нажатии на элемент в выпадающем меню оно подсвечивается но не подсвечивается его родитель получается. Тоисть сейчас при нажатии на "Распродажа" она светиться а при нажатии на "Пункт" 1 он светится а "Распродажа" нет( вот ссылка на статью откуда я взял код https://snipp.ru/jquery/active-menu-jquery В js я не разбираюсь, буду рад советам или другим статьям) И реализовать я это хочу на WordPress (стандартное меню и плагины мне не подходят потому что особое меню поэтому пишу с нуля)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrp">
<div class="left-col">
<ul class="left_menu js_menu">
<li><a href="#">Спецпредложения</a></li>
<li><a href="#">Распродажа</a></li>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>
<li><a href="#">Акции</a></li>
</ul>
</div>
</div>
<style type="text/css">
.wrp {
overflow: hidden;
}
.left-col {
width: 250px;
float: left;
}
.right-col {
margin-left: 280px;
}
h1 {
padding: 0;
margin: 0 0 30px 0;
}
.left_menu {
margin: 0 0 30px 0;
padding: 0;
background: #f2f2f2;
border: 1px solid #ddd;
display: block;
}
.left_menu li {
margin: 0;
padding: 0;
display: block;
}
.left_menu a {
display: block;
font-size: 16px;
color: rgb(40, 40, 40);
font-weight: bold;
line-height: 1.25;
padding: 10px 10px;
border-bottom: 1px solid #d9d9d9;
background: url(https://snipp.ru/demo/247/left_menu.png) 95% 50% no-repeat;
text-decoration: none;
}
.left_menu a.active {
color: #fff;
background-color: #0546a2;
}
</style>
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function($){
var url = document.location.href;
var pos= url.indexOf("#");
if (pos > 0) {
url = url.substring(0, pos);
}
$.each($('.js_menu a'), function(index, value) {
if (url.indexOf($(this).attr('href')) + 1) {
$(this).addClass('active').parent().addClass('active');
}
});
});
</script>
</body>
</html>