Для того чтобы сделать dropdown кликабельным в Bootstrap 4 вам понадобится немного JavaScript кода и настройка соответствующих классов.
Первым шагом, добавьте необходимую структуру HTML для dropdown в ваш код. Он должен включать кнопку-триггер для отображения выпадающего списка и сам список с элементами. Примерный код может выглядеть следующим образом:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадающий список
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Элемент 1</a>
<a class="dropdown-item" href="#">Элемент 2</a>
<a class="dropdown-item" href="#">Элемент 3</a>
</div>
</div>
В данном примере мы используем классы Bootstrap 4 для стилизации кнопки и списка, а также атрибуты data-toggle="dropdown" и aria-haspopup="true" чтобы указать, что этот элемент является dropdown и может открывать выпадающий список.
Далее, вам необходимо добавить JavaScript код для обработки кликов на элементах списка и отображения/скрытия самого списка. Для этого вы можете использовать библиотеку jQuery, которая требуется для работы Bootstrap 4.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('.dropdown-menu a').click(function(){
var selectedValue = $(this).text();
$('.btn.dropdown-toggle').text(selectedValue);
});
});
</script>
В данном примере мы устанавливаем обработчик клика на все элементы списка выпадающего меню. По клику на элемент, мы берем его текст и устанавливаем его в текст кнопки-триггера.
В итоге, когда пользователь кликает на элемент списка, текст кнопки-триггера заменяется на текст выбранного элемента.
Более подробную информацию о том, как работать с dropdown в Bootstrap 4 вы можете найти в официальной документации: https://getbootstrap.com/docs/4.5/components/dropdowns/