0

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>

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

5
  • 1
    Возможный дубликат вопроса: Почему не работает выпадающий список? Commented 11 февр. 2018 в 18:04
  • закрытие/открытие списка реализовано в ответе в предыдущем вопросе. Commented 11 февр. 2018 в 18:16
  • @Александр, тут другие условия, там просто появление списка, а тут надо что бы закрытие было при втором клике на этот элемент
    – uzi_no_uzi
    Commented 11 февр. 2018 в 18:46
  • Вы ответ видели?Там реализация открытия/закрытия,чтобы добавить выделения достаточно дописать свойство в селектор и не открывать еще один вопрос. Commented 11 февр. 2018 в 18:51
  • @Александр, вы не поняли, вот пользователь нажал первый раз, оно выделилось желтым, а нажал второй раз и список закрылся.
    – uzi_no_uzi
    Commented 11 февр. 2018 в 18:52

1 ответ 1

0

Всего лишь добавить строку 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>

6
  • да не то у вас, говорю же, первый раз кликаешь, заголовок становится оранжевым и скраю появляется оранжевая полоска, второй раз кликаешь и список должен закрыться вообще.
    – uzi_no_uzi
    Commented 11 февр. 2018 в 19:10
  • @uzi_no_uzi а сейчас заголовок зеленый становится?список не закрывается? Commented 11 февр. 2018 в 19:12
  • да работает это, но первый клик должен выделять
    – uzi_no_uzi
    Commented 11 февр. 2018 в 19:14
  • @uzi_no_uzi Скопировал строку e.target.classList.toggle("active"); в сниппет чтобы Вы могли нажать выполнить и убедиться Commented 11 февр. 2018 в 19:22
  • вы читаете мои комментарии вообще? Я же пишу, что первый клик - должен выделять категорию (P.S. Списки при загрузке страницы находятся в открытом виде), т.е. делать заголовок оранжевым и прибавлять линию слева, а второй клик должен закрывать список и делать его неактивным.
    – uzi_no_uzi
    Commented 11 февр. 2018 в 19:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.