Bootstrap 4 dropdown не работает

Основное раскрывающийся список

Раскрывающееся меню представляет собой переключаемое меню, позволяющее пользователю выбрать одно значение из стандартного списка:

Пример

Пример объяснено

.dropdown класс указывает раскрывающееся меню.

Чтобы открыть раскрывающееся меню, используйте кнопку или ссылку с классом .dropdown-toggle и data-toggle="dropdown" атрибутом.

Добавьте .dropdown-menu класс к элементу,

Разделитель раскрывающегося списка

.dropdown-divider класс используется для разделения ссылок внутри выпадающего меню с тонкой горизонтальной границей:

Я скопировал официальный пример Bootstrap 4 для выпадающих меню, но он не работает, и ничто не упало.

Изменить: в случае, если у кого-то еще есть эта проблема, я считаю, что решение для OP было то, что он не импортировал popper.js .

Проверьте, что есть jQuery и все соответствующие компоненты Bootstrap. Также проверьте консоль и убедитесь, что ошибок нет.

попробуйте добавить эти строки в конец файла

Предполагая, что библиотеки Bootstrap и Popper были установлены с помощью диспетчера пакетов Nuget, для веб-приложения, использующего Visual Studio, в файле главной страницы (Site.Master), прямо под тегом body, добавьте ссылку на popper.min.js, введя:

Вот изображение для лучшего отображения местоположения:

Обратите внимание, что ссылка на добавляемую библиотеку popper должна быть в папке umd, а не в папке Scripts.

Как известно, стандартный dropdown список раскрывается только при нажатии на главный пункт меню. По умолчанию выпадающий список имеет свойство « display: none; », и переходит в « display: block; », когда срабатывает событие click и на оборот — чтобы скрыть, нужно опять нажать на меню.

На примере меню из документации Bootstrap 4:

В данном варианте, если вы просто поместите это меню на сайте, подключите все необходимые библиотеки, меню будет работать по клику.

Чтобы меню раскрывалось и скрывалось при наведении (событие hover), достаточно чуть подправить css файл bootstrap 4 или прописать это в своем файле стилей:

Теперь при наведении, нашему списку будет присваиваться свойство « block » и он раскроется. Вот так легко это делается, не правда ли?

Чтобы это работало только на ПК версиях экранов, и не работало на мобильных устройствах, так как там просто отсутствует нормальная работа события hover . Я рекомендую прописать ниже еще вот такой код:

Учтите, что этим вы не отменяете событие click – раскрытие меню по клику. Оно будет так же работать наравне и с наведением.

Как отключить событие click и оставить только событие hover , вы можете прочитать в этой статье:

Всем удачи!

Возможно вам так же будет интересно:

Если я Вам помог — оставьте свой отзыв или поделитесь сайтом с друзьями в социальных сетях!