Помогите разобраться, пожалуйста.
Есть меню, по нажатию на ссылку - выпадающий блок (используется пара аттрибутов data-). Необходимо по нажатию добавить класс ссылке, а по повторному нажатию убрать этот класс. Использую данный код, но при повторном нажатии класс не убирается.
<!--использую navbar bootstrap -->
<ul class="menu-main-nav">
<li><a class="menu-main-item" href="#" data-item="menu-restoran">Для ресторанов<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-trade">Для торговли<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-equipment">Торговое оборудование<i class="main-choise"></i></a></li>
</ul>
<!--Блок выпадающего мегаменю</i> -->
<div class="menu-mega" id="menu-restoran">
<nav>
<div class="menu-mega-row">
<div class="menu-mega-block">
<a class="menu-mega-item" href="#">Ресторан</a>
</div>
<div class="menu-mega-block">
<a class="menu-mega-item" href="#">Управление</a>
</div>
<div class="menu-mega-block">
<a class="menu-mega-item" href="#">Фастфуд</a>
</div>
<div class="menu-mega-block">
<a class="menu-mega-item" href="#">Ресторанная сеть</a>
</div>
</div>
</nav>
</div>
<!-- тут дальше еще три блока -->
$(function() {
var items = $(".menu-main-item"); //ссылка по которой идет нажатие
var block = $(".menu-mega"); //выпадающий блок
$(items).on('click', function () {
var DataItem = $(this).attr('data-item');
var current = $('#'+ DataItem);
$(block).not(jQuery(current)).slideUp();
$(current).slideToggle(); //выпадающий блок
$(items).removeClass('active-menu-item');
$(this).toggleClass('active-menu-item'); //класс активной ссылки
return(false);
});
jQuery('body').click(function(){
jQuery(block).slideUp();
jQuery(items).removeClass('active-menu-item'); //спрятать //блок и удалить класс по нажатию вне меню
});
jQuery(block).click(function (e) { e.stopPropagation(); }); //отменить
//событие на клик в выпадающем блоке
});
Смысле в том, чтобы по нажатию на определенную ссылку появлялся соответствующий блок мега меню и у ссылки добавлялся класс (в этом классе css треугольник внизу ). При повторном нажатии блок мега-меню скрывается, класс удаляется. При этом если нажать на соседнюю ссылку, то у предыдущей класс удаляется, ну и т.п.
С этим кодом у меня блок с выпадающим мега меню работает как нужно, но класс у ссылки работает так - при нажатии появляется, при повторном нажатии не удаляется, при нажатии на соседнюю ссылку удаляется.
Я понимаю, что как-то все сумбурно написала. но может, кто-то сможет мне помочь разобраться, а то что-то я совсем запуталась)) Спасибо заранее за совет.