Как отследить второй клик?

354
13 февраля 2018, 06:14

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>

Есть такие выпадающие списки. При первом клике они должны выделятся(Я это реализовал), а при повторном клике список должен закрываться, так вот я не знаю как отследить то, что пользователь нажал второй раз на элемент, как это можно отследить?

Answer 1

Всего лишь добавить строку e.target.classList.toggle("active"); и селектор,это Вы считаете не повторный вопрос?

.drop_down_lists .active {
  color: #ff7519;
}


   let menu = document.addEventListener('click', showMenu); 
function showMenu(e) { 
if(e.target.tagName !== 'H2') return; 
let temp = e.target.parentElement.querySelector('.hidden_drop_down'); 
if(temp && e.target.classList.contains('active')) temp.classList.toggle('hidden'); 
e.target.classList.toggle('active');   
}
.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}.drop_down_lists h2{margin-left:24px;color:#fff;font-size:20px;cursor:pointer}.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)} 
.hidden_drop_down { 
    display: block; 
    margin-top:10px; 
    border-left:5px solid #ff7519; 
} 
.drop_down_lists .active { 
  color: #ff7519; 
} 
.hidden { 
  display: none; 
}
<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>

READ ALSO
Верстка landing page. Сложный фон
CSS

Верстка landing page. Сложный фон

Всем привет! Недавно начал обучаться верстке сайтовКак реализовать такого рода фон? Чтобы это был не просто рисунок, а максимально адаптивный...

 238
Как реализовать подобную кнопку на CSS
CSS

Как реализовать подобную кнопку на CSS

Возможно ли реализовать данную кнопку средствами CSS?

 260
Ошибка: GET *.css net::ERR_ABORTED
CSS

Ошибка: GET *.css net::ERR_ABORTED

Всем приветОбъясните пожалуйста? В этом случае: <link rel="stylesheet" type="text/css" href="styles/style_low

 439
Адаптивные картинки
CSS

Адаптивные картинки

Здравствуйте, у меня есть парочку вопросов

 231