У меня есть меню с выпадающим списком. Задача очень простая и состоит в том, чтобы при клике на элемент меню открывался дополнительный список.
HTML:
<ul class="main-menu">
<li><a href="#">About</a></li>
<li>
<a href="#">Blog</a>
<ul class="sub">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
CSS:
.main-menu li a {
color: #000;
}
.sub {
display: none;
}
.main-menu li a.active + .sub {
display: block;
}
Script:
$('.main-menu > li > a').click(function () {
$('.main-menu > li > a').removeClass('active');
$(this).addClass('active');
});
Все вроде бы работает отлично, но при повторном клике не удаляется класс active
и не закрывается выпадающий список. Не могу понять, где ошибка?