Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2019, 17:28
Новичок на форуме
Отправить личное сообщение для olgamir1997@gmail.com Посмотреть профиль Найти все сообщения от olgamir1997@gmail.com
 
Регистрация: 22.01.2019
Сообщений: 1

DropDown Menu vanilla js
Добрый вечер!Не могу разобраться с задачей(
Реализовать примитивный дропдаун. Изначально все dropdown-menu скрыты через класс .d-none. При клике на dropdown-item должен отображаться блок dropdown-menu который вложен именно в тот dropdown-item на котором произошел клик. При повторном клике на этот же dropdown-item блок dropdown-menu должен закрыться. При клике на любой другой dropdown-item уже открытый dropdown-menu должен закрываться а на тот который кликнули открываться.
<ul class="menu">
<li class="dropdown-item">
<span>Dropdown menu item</span>
<div class="dropdown-menu d-none">
<ul class="dropdown-list">
<li>Dropdown item 1</li>
<li>Dropdown item 2</li>
</ul>
</div>
</li>
<li>
<span>Menu item</span>
</liЮ
<li class="dropdown-item">
<span>Dropdown menu item 2</span>
<div class="dropdown-menu d-none">
<ul class="dropdown-list">
<li>Second Dropdown item 1</li>
<li>Second Dropdown item 2</li>
</ul>
</div>
</li>
</ul>
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2019, 18:50
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Заменил SPAN на A, и LI на LI > A дабы увеличить доступность! (У вас совершенно не фокусируемые разделы)

Сообщение от olgamir1997@gmail.com
Изначально все dropdown-menu скрыты через класс .d-none.
Это WET, а мне нравится DRY и он практичней. (Ну не буду же я добавлять каждый раз этот класс, ведь такое меню подразумевает так и так, что всё скрыто изначально)

Сообщение от olgamir1997@gmail.com
При повторном клике на этот же dropdown-item блок dropdown-menu должен закрыться.
А я считаю, что должен оставаться открытым. (И пользователи Windows любят делать двойные щелчки)

Вот так получилось...

<nav>
	<ul>
		<li>
			<a href="#">Dropdown menu item</a>
			<ul>
				<li><a href="#1">Dropdown item 1</a></li>
				<li><a href="#2">Dropdown item 2</a></li>
				<li><a href="#3">Dropdown item 3</a></li>
			</ul>
		</li>
		<li>
			<a href="#blog">Category</a>
			<ul>
				<li><a href="#1">Category 1</a></li>
				<li><a href="#2">Category 2</a></li>
				<li><a href="#3">Category 3</a></li>
			</ul>
		</li>
		<li>
			<a href="#about">About</a>
			<ul>
				<li><a href="#1">Bio</a></li>
				<li><a href="#2">Photos</a></li>
				<li><a href="#3">Social</a></li>
			</ul>
		</li>
	</ul>
</nav>

<style>

nav ul {
	display: flex;
	justify-content: center;
	list-style: none;
	padding: 0;
}

nav li {
	flex: 1;
	position: relative;
}

nav a {
	display: block;
	text-decoration: none;
	background: rebeccapurple;
	font-weight: bold;
	color: white;
	padding: 1em;
	text-align: center;
}

nav li li a {
	background: #e6d9f2;
	color: black;
	font-weight: 300;
}

nav a:focus {
	background: #ff5500;
}

nav a + ul {
	position: absolute;
	flex-flow: column;
	width: 100%;
}

/* механизм переключения видимости */
nav li ul {	display: none; }
	
nav li:focus-within ul { display: initial; }
	
nav li:focus ul { display: initial; }
	
nav a:focus {
	background: black;
	color: white
}

</style>

Последний раз редактировалось Malleys, 22.01.2019 в 19:01.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
BackEnd/FrontEnd Developer (Native JS) Abab Работа 0 25.12.2016 10:56
js стиль render для react.js vflash Ваши сайты и скрипты 5 01.04.2016 23:57
Вакансия JavaScript разработчик / JS / Frontend developer (Санкт-Петербург) Сергей Грачёв Работа 0 21.09.2015 13:31
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28
Проблемы с меню на JS SeeD Общие вопросы Javascript 5 21.11.2008 19:44