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 , вы можете прочитать в этой статье:
Всем удачи!
Возможно вам так же будет интересно:
Если я Вам помог — оставьте свой отзыв или поделитесь сайтом с друзьями в социальных сетях!