DropDown Menu vanilla js

[olgamir1997@gmail.com]

Добрый вечер!Не могу разобраться с задачей(
Реализовать примитивный дропдаун. Изначально все 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>

[Malleys]

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

Изначально все dropdown-menu скрыты через класс .d-none.

Это WET, а мне нравится DRY и он практичней. (Ну не буду же я добавлять каждый раз этот класс, ведь такое меню подразумевает так и так, что всё скрыто изначально)

При повторном клике на этот же 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>