Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.03.2017, 21:11
Аспирант
Отправить личное сообщение для slavAAvals Посмотреть профиль Найти все сообщения от slavAAvals
 
Регистрация: 08.12.2016
Сообщений: 49

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

<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')
		})
	})
})
Ответить с цитированием
  #2 (permalink)  
Старый 23.03.2017, 21:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

slavAAvals,
зачем цикл в 9 строке?
Ответить с цитированием
  #3 (permalink)  
Старый 24.03.2017, 07:31
Аспирант
Отправить личное сообщение для slavAAvals Посмотреть профиль Найти все сообщения от slavAAvals
 
Регистрация: 08.12.2016
Сообщений: 49

чтобы пройти по подменю, первый же цикл ходил по меню
Ответить с цитированием
  #4 (permalink)  
Старый 24.03.2017, 07:45
Аспирант
Отправить личное сообщение для slavAAvals Посмотреть профиль Найти все сообщения от slavAAvals
 
Регистрация: 08.12.2016
Сообщений: 49

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

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

	})
})
Ответить с цитированием
  #5 (permalink)  
Старый 24.03.2017, 08:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

slavAAvals,
categoryItem.forEach(function(list, i) {
    list.addEventListener('click', () => {
    categoryHiddenMnu[i].classList.toggle('inner-list__hidden')
  })
})
Ответить с цитированием
  #6 (permalink)  
Старый 24.03.2017, 08:56
Аспирант
Отправить личное сообщение для slavAAvals Посмотреть профиль Найти все сообщения от slavAAvals
 
Регистрация: 08.12.2016
Сообщений: 49

Вот как, спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Нужна небольшая помощь с jQuery меню Daniel Defo jQuery 6 28.02.2015 23:07
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Вылеление активных пунков меню. Нужна помощь ! panictmn Элементы интерфейса 27 22.01.2014 11:18
Выпадающее меню (нужна помощь с JS) edveraxo Элементы интерфейса 1 03.11.2012 09:06