Почему не работает выпадающий список?

209

12 февраля 2018, 05:33

var dropDown = document.querySelectorAll('.drop_down_lists'); 
for (var i=0; i < dropDown.length; i++) { 
	if(dropDown[i].addEventListener) { 
		dropDown[i].addEventListener('click', function() { 
			if(this.lastChild.previousSibling.style.display == 'none') { 
				this.lastChild.previousSibling.style.display = 'block'; 
				this.firstChild.nextSibling.style.color = '#ff7519'; 
			}; 
		}) 
	} 
}

.main_content .repeat_aside{float:left;background-color:#4c4b4b;width:270px;margin-top:24px;padding-top:28px;padding-bottom:200px}.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:18px;border-left:5px solid #ff7519}.main_content .repeat_aside .drop_down_lists h2{margin-left:24px;color:#fff;font-size:20px}.main_content .repeat_aside .drop_down_lists .hidden_drop_down{margin-top:10px;display:none}.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:30px}.main_content .repeat_aside .drop_down_lists .hidden_drop_down a:hover{color:#ff7519;transition:.2s}

<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="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> 
						<a href="#">Анализ рынка</a> 
					</div> 
				</div> 
			</aside> 
		</div> 
	</section>

Не работает выпадающий список при добавлении if(this.lastChild.previousSibling.style.display == 'none') без этого оператора сравнения все работает, видимо this внутри if как-то по другому работает, но я не понимаю как

В чем может быть проблема?

Answer 1

Сравнивать надо так if(this.lastChild.previousSibling.style.display == ''). Вообще лучше использовать делегирование и избегать вот этого в условии dropDown[i].addEventListener . This внутри обработчика события ссылается на текущий элемент, то есть на тот, на котором он сработал.Таких условий тоже лучше избегать this.lastChild.previousSibling.style.display. По разметке я бы сделал меню списком. Вообщем удалите вот этот селектор .main_content .repeat_aside .drop_down_lists .hidden_drop_down{margin-top:10px;display:none} и добавьте в css:

.hidden_drop_down {
    display: block;
    margin-top:10px;
}
.hidden {
    display: none;
}

в html добавьте каждому блоку класс hidden во так <div class="hidden_drop_down hidden">
js можно сделать так:

let menu = document.addEventListener('click', showMenu);
    function showMenu(e) {
    if(e.target.tagName !== 'H2') return;
    e.target.parentElement.querySelector('.hidden_drop_down').classList.toggle('hidden');
    }