Как сделать выпадающий список с выбором (с блочным элементом внутри)
Таких элементов на странице 3, при нажатии вниз должен выезжать список с элементами (так же цвет и название). Через select не получиться, так как он не принимает в себя блочные теги. Как это можно сделать? или делать под каждый список отдельную функцию на JS? При нажатии на элемент внутри списка, он должен отображаться выбранным
Ответы (1 шт):
Автор решения: Zhenyria
→ Ссылка
Вы можете использовать фреймворк Bootstrap 4. Вы рано или поздно к нему придёте, если ещё не пришли. Для выпадающего меню в Bootstrap есть класс dropdown.
Вот так это выглядит:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="https://google.com">Action</a>
<a class="dropdown-item" href="https://google.com">Another action</a>
<a class="dropdown-item" href="https://google.com">Something else here</a>
</div>
</div>А если вы по какой-то причине не хотите подключать никакие сторонние фреймворки, вы всегда можете посмотреть исходники Bootstrap, как это устроено там.