var dropDown = document.querySelectorAll('.drop_down_lists');
for (var i=0; i < dropDown.length; i++) {
if(dropDown[i].addEventListener) {
dropDown[i].firstChild.nextSibling.addEventListener('click', function (event) {
for(var j=0; j < dropDown.length; j++) {
if(dropDown[j].classList.contains('drop_down_lists_activ') == true) {
dropDown[j].classList.remove('drop_down_lists_activ');
}
}
this.parentNode.classList.add('drop_down_lists_activ');
})
}
}
.main_content .repeat_aside{float:left;background-color:#4c4b4b;width:270px;margin-top:24px;padding-top:18px;padding-bottom:200px;height:1400px}.main_content .repeat_aside .icon-home{color:#fff;font-size:28px;margin-left:24px}.main_content .repeat_aside .icon-home:hover{color:#ff7519;transition:.2s}.main_content .repeat_aside .drop_down_lists{margin-top:8px;border-left:5px solid transparent}.main_content .repeat_aside .drop_down_lists h2{margin-left:24px;color:#fff;font-size:20px;cursor:pointer}.main_content .repeat_aside .drop_down_lists .hidden_drop_down{margin-top:10px;display:block}.main_content .repeat_aside .drop_down_lists .hidden_drop_down a{display:block;text-decoration:none;color:#b8b8b8;font-size:16px;font-weight:700;margin-left:40px;line-height:24px}.main_content .repeat_aside .drop_down_lists .hidden_drop_down a:hover{color:#ff7519;transition:.2s}.main_content .repeat_aside .drop_down_lists_activ{border-left:5px solid #ff7519}.main_content .repeat_aside .drop_down_lists_activ h2{color:#ff7519}.main_content .contact_list{margin-top:10px}.main_content .contact_list h2{margin-left:24px;color:#fff;font-size:20px;cursor:pointer;border-left:5px solid transparent}.main_content .contact_list h2 i:before{transform:rotate(-90deg)}
<section class="main_content">
<div class="container">
<aside class="repeat_aside">
<i class="icon-home"></i>
<div class="drop_down_lists">
<h2>Профиль компании<i class="icon-arrow-down"></i></h2>
<div class="hidden_drop_down">
<a href="#">Основные сведения</a>
<a href="#">Настройки аккаунта</a>
</div>
</div>
<div class="drop_down_lists">
<h2>Объявления<i class="icon-arrow-down"></i></h2>
<div class="hidden_drop_down">
<a href="#">о продаже</a>
<a href="#">о покупке</a>
<a href="#">предложение услуг</a>
<a href="#">заказ услуг</a>
</div>
</div>
<div class="drop_down_lists">
<h2>Сообщения<i class="icon-arrow-down"></i></h2>
<div class="hidden_drop_down">
<a href="#">Предложения</a>
<a href="#">Заявки</a>
<a href="#">Исходящие</a>
<a href="#">От администрации</a>
<a href="#">Прайс-листы</a>
<a href="#">Спам</a>
</div>
</div>
<div class="contact_list">
<h2>Контакты<i class="icon-arrow-down"></i></h2>
</div>
<div class="drop_down_lists">
<h2>Торговые сервисы<i class="icon-arrow-down"></i></h2>
<div class="hidden_drop_down">
<a href="#">Статус компании</a>
<a href="#">Прайс-лист</a>
<a href="#">Подписки</a>
<a href="#">Шаблоны</a>
<a href="#">Анализ рынка</a>
</div>
</div>
</aside>
</div>
</section>
Есть такие выпадающие списки. При первом клике они должны выделятся(Я это реализовал), а при повторном клике список должен закрываться, так вот я не знаю как отследить то, что пользователь нажал второй раз на элемент, как это можно отследить?