Реализовать примитивный дропдаун

[Трудяга]

Очень сложная для меня задача( может кто то объяснит как и что делать с этим)
Реализовать примитивный дропдаун. Изначально все 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>
      <!-- / .dropdown-list -->
    </div>
    <!-- / .dropdown-menu -->
  </li>
  <!-- / .dropdown-item -->
  <li>
    <span>Menu item</span>
  </li>
  <!-- / 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>
      <!-- / .dropdown-list -->
    </div>
    <!-- / .dropdown-menu -->
  </li>
  <!-- / .dropdown-item -->
</ul>

.d-none {
  display: none;
}

.dropdown-item {
  cursor: pointer;
}

[рони]

Трудяга,
искать кастомизация селекта
https://javascript.ru/forum/jquery/7...tml#post484087

[Malleys]

искать кастомизация селекта
https://javascript.ru/forum/jquery/7...tml#post484087

Почти тристо строк и оно даже приблизительно не обладает тем функционалом, что есть у элемента <select>! рони, почему так? Дублировать код два раза... и к тому же оно плохо доступное!

Для этого есть HTML-элемент <select> к которому можно применять стили...

<style>
	select {
		display: inline-block;
		border: 2px solid #bbb;
		padding: 4px 22px 3px 5px;
		margin: 0;
		font: inherit;
		outline: none;
		line-height: 1.2;
		-webkit-appearance: none;
		border-radius: 6px;
		background: url('data:image/svg+xml,\
		<svg xmlns="http://www.w3.org/2000/svg" \
			width="10px" height="10px" viewBox="0 0 12 10" \
			stroke="%23bbb" stroke-width="1.3" stroke-linecap="round" \
			stroke-linejoin="round" fill="none"\
		>\
			<polyline points="2 4 5 7 8 4"></polyline>\
		</svg>') no-repeat right center / 20px 20px white;
	}

	select::-moz-focus-inner {
		border: 0;
	}

	select:focus {
		box-shadow: 0 0 3px 1px #ccc;
	}

	select:hover {
		background-color: #eee;
	}
</style>

<select>
    <option>Ширина ботинка</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="ee">EE</option>
</select>

<select>
    <option>Лезвие</option>
    <option value="11,5">11,5</option>
    <option value="12">12</option>
    <option value="12,5">12,5</option>
    <option value="13">13</option>
    <option value="13,5">13,5</option>
    <option value="14">14</option>
    <option value="14,5">14,5</option>
    <option value="15">15</option>
    <option value="15,5">15,5</option>
</select>

Очень сложная для меня задача( может кто то объяснит как и что делать с этим)

Вы можете удалить ненужные классы! Вот пример выпадающего меню... (также есть поддержка узких экранов и вложенности любого уровня!)

<nav tabindex="0">
	<ul>
		<li>
			<a href="#1">Dropdown menu item</a>
			<ul>
				<li><a href="#11">Dropdown item 1</a></li>
				<li><a href="#12">Dropdown item 2</a></li>
			</ul>
		</li>
		<li><a href="#2">Menu item</a></li>
		<li>
			<a href="#3">Dropdown menu item 2</a>
			<ul>
				<li><a href="#31">Second Dropdown item 1</a></li>
				<li><a href="#32">Second Dropdown item 2</a></li>
			</ul>
		</li>
	</ul>
</nav>

<style>

@import url("https://fonts.googleapis.com/css?family=Russo+One&subset=cyrillic");

nav {
	font-family: "Russo One", sans-serif;
}

nav li {
	position: relative;
	list-style: none;
}

nav ul {
	padding: 0;
	margin: 0;
	background: linear-gradient(45deg, #888, #aaa);
	text-shadow: 0 1px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, .7);
}

nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}

nav li ul {
	display: none;
	position: absolute;
	margin: -5px 0 0 5px;
	box-shadow:
		0 .1em 1em rgba(0, 0, 0, 0.3),
		inset 0 0 1px rgba(255, 255, 255, 0.5)
	;
}

nav li > ul > li > ul {
	left: 100%;
	top: 0;
	margin: 5px 0 0 -5px;
}

nav ul {
	border-radius: 5px;
}

nav li:focus-within > ul {
	display: block;
	display: flow-root;
	z-index: 1;
}

nav li a, nav > ul:before {
	color: white;
	text-decoration: none;
	display: block;
	padding: 1em;
	border-radius: 5px;
	white-space: nowrap;
}

nav li a:focus {
	background: rgba(0, 0, 0, .5);
	color: white;
}

@media (max-width: 840px) {
	nav > ul:before {
		content: "☰";
	}

	nav > ul {
		flex-direction: column;
		display: inline-block;
	}

	nav:focus-within > ul {
		display: block;
	}

	nav li {
		flex: 1;
		display: none;
	}

	nav:focus-within li {
		display: block;
	}

	nav li ul,
	nav li > ul > li > ul {
		position: static;
		margin: 10px;
	}

	nav > ul:before,
	nav li a {
		white-space: normal;
		text-align: center;
	}
}
		
</style>

Структура меню однородная, вы без проблем можете переставлять пункты меню...

[рони]

Почти тристо строк и оно даже приблизительно не обладает тем функционалом, что есть у элемента <select>! рони, почему так? Дублировать код два раза... и к тому же оно плохо доступное!

не сомневаюсь, что вы предложили лучшее решение, могу только гадать, что не так с моим вариантом, что там дублировано, вероятно оно безнадёжно устарело, если будет время, напишите пожалуйста подробнее.

[Трудяга]

Спасибо, но задача заключается в том что бы это реализовать с помощью JS

[Malleys]

Спасибо, но задача заключается в том что бы это реализовать с помощью JS

И что будет улучшено, если будет так? Разве оно не точно также будет работать?

могу только гадать, что не так с моим вариантом

https://www.w3.org/TR/WCAG21/#operable

что там дублировано

Вы элементы списка 2 раза повторяете, первый раз в <select>, который зачем-то скрываете, второй раз тоже самое, но только зачем-то при помощи <div>

[рони]

Malleys,
спасибо ... одно понял вы хотите чтоб работало и от клавиатуры, про дублирование не понимаю. есть селект, хочется иметь такой же элемент, но более удобный и при этом сохранить изменение значения на селекте, что не так? для вас <select> удобно и красиво, для меня <ul>.

[Malleys]

для вас <select> удобно и красиво, для меня <ul>

Для стилизации нужно использовать CSS.

одно понял вы хотите чтоб работало и от клавиатуры

А где вы прочитали, что это я так хочу? https://www.w3.org/TR/WCAG21/ Это рекомендация, чтобы ваш список работал везде, и очевидным способом.

Что значит, для меня удобно? Вы используете элементы не по назначению...

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

Это может быть список стран, где вы побывали, список продуктов, необходимый для приготовления блюда, роль menu позволяет описать список команд доступных для программы и т.д.

The select element represents a control for selecting amongst a set of options.

А про роль listbox сказано: A widget that allows the user to select one or more items from a list of choices

<select> удобно и красиво, для меня <ul>

Да хоть знак подчёркивания, для стилизации нужно использовать CSS.

[рони]

Для стилизации нужно использовать CSS.

как добавить картинки, как убрать \/ в select?

[Malleys]

Я не знаю, в чём смысл таких вопросов... выше уже был пример.

как добавить картинки

background-image: url(image.png);

как убрать \/ в select?

appearance: none; https://caniuse.com/#feat=css-appearance

select {
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* убрать стрелку по умолчанию */
   background-image: url(arrow.png);   /* добавить свою стрелку */
}

В background-image можно через запятую перечислять много фонов.