Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Нужна помощь в понимании вопроса по меню (https://javascript.ru/forum/events/68063-nuzhna-pomoshh-v-ponimanii-voprosa-po-menyu.html)

slavAAvals 23.03.2017 21:11

Нужна помощь в понимании вопроса по меню
 
Берутся все элементы, не могу выбрать конкретный элемент меню и по клику сделать, чтобы открылось только ЕГО подменю....

<div class="leftbar-menu__category">
					<ul class="category__list">
						<li class="category__item">Top Sales
                           <ul class="category__inner-list  inner-list__hidden">
                           	<li class="category__inner-item">Features</li>
                           	<li class="category__inner-item">Morolas</li>
                           	<li class="category__inner-item">Lacoste</li>
                           	<li class="category__inner-item">Pernuly</li>
                           </ul>
						</li>
						<li class="category__item">Brand Focus
							<ul class="category__inner-list  inner-list__hidden">
							 <li class="category__inner-item">Features</li>
							 <li class="category__inner-item">Morolas</li>
							 <li class="category__inner-item">Lacoste</li>
							 <li class="category__inner-item">Pernuly</li>
							</ul>
						</li>
						<li class="category__item">Hi-Tech
							<ul class="category__inner-list  inner-list__hidden">
							 <li class="category__inner-item">>Features</li>
							 <li class="category__inner-item">Morolas</li>
							 <li class="category__inner-item">Lacoste</li>
							 <li class="category__inner-item">Pernuly</li>
							</ul>
						</li>
						<li class="category__item">Home
							<ul class="category__inner-list  inner-list__hidden">
							 <li class="category__inner-item">Features</li>
							 <li class="category__inner-item">Morolas</li>
							 <li class="category__inner-item">Lacoste</li>
							 <li class="category__inner-item">Pernuly</li>
							</ul>
						</li>
						<li class="category__item">Sale
							<ul class="category__inner-list  inner-list__hidden">
							 <li class="category__inner-item">Features</li>
							 <li class="category__inner-item">Morolas</li>
							 <li class="category__inner-item">Lacoste</li>
							 <li class="category__inner-item">Pernuly</li>
							</ul>
						</li>
					</ul>



const categoryList = document.querySelectorAll('.category__item');
const categoryHiddenMnuS = document.querySelectorAll('.category__inner-list');
const categoryItem = Array.prototype.slice.call(categoryList);
const categoryHiddenMnu = Array.prototype.slice.call(categoryHiddenMnuS);


categoryItem.forEach(function(list) {
    list.addEventListener('click', () => {
		categoryHiddenMnu.forEach( (elem) => {
           elem.classList.toggle('inner-list__hidden')
		})
	})
})

рони 23.03.2017 21:32

slavAAvals,
зачем цикл в 9 строке?

slavAAvals 24.03.2017 07:31

чтобы пройти по подменю, первый же цикл ходил по меню

slavAAvals 24.03.2017 07:45

Решил, но совершенно глупым образом

categoryItem.forEach(function(list) {
    list.addEventListener('click', () => {
	        list.lastChild.classList.toggle('inner-list__hidden');

	})
})

рони 24.03.2017 08:42

slavAAvals,
categoryItem.forEach(function(list, i) {
    list.addEventListener('click', () => {
    categoryHiddenMnu[i].classList.toggle('inner-list__hidden')
  })
})

slavAAvals 24.03.2017 08:56

Вот как, спасибо.


Часовой пояс GMT +3, время: 09:49.