bootstrap не работает выпадающее меню
Выпадающее меню Bootstrap не работает
Мне не удается заставить мои раскрывающиеся списки работать. Я могу заставить навигационную панель отображаться идеально, но когда я нажимаю «Раскрывающийся список» (любой из них), оно не отображает раскрывающееся меню. Я пробовал искать другие сообщения об этом, но ничего, что решало бы проблемы всех, не помогло. Я скопировал исходный код прямо с веб-сайта начальной загрузки, но не могу заставить его работать на моей машине. У кого-нибудь есть идеи? Я смотрел на это в течение часа и, кажется, не могу понять, в чем проблема.
Может попробовать с
и посмотрим, сработает ли это.
100% рабочий раствор
просто поместите ссылку JQuery в первую очередь ссылки js и css
Пример правильный
Пример неверный!
Поместите ссылку jquery js перед ссылкой bootstrap js следующим образом:
Согласно getBootstrap.com, выпадающие списки построены на сторонней библиотеке Popper.js. Итак, если раскрывающееся меню не работает при нажатии, а работает только при наведении курсора на раскрывающийся список, включите popper.js, bootstrap.js и bootstrap.css. Одной из причин может быть отказ от popper.js до включения пакетов начальной загрузки.
Если кто-то по-прежнему сталкивается с той же проблемой, обязательно проверьте источник вашей страницы просмотра в браузере, чтобы проверить, все ли файлы jquery и bootstrap загружены, а пути к файлу верны. Самое важное! обязательно используйте последний стабильный файл jquery.
Может быть, кому-то это пригодится:
Резюме (он же tl; dr)
Задний план
Симптомы
При посещении сайта на локальном тестовом сервере django он на первый взгляд выглядел отлично: стиль / макет использовались, bootstrap как ожидалось, включая панель навигации. Однако все раскрывающиеся меню не раскрылись.
Ошибок в консоли браузера нет. Все статические файлы js и css файлы были загружены успешно, а функциональные возможности других пакетов, на которые полагались, jquery работали должным образом.
Решение
Откат django-bootstrap3==6.2.2 для нас решил проблему, хотя я понятия не имею, что именно ее вызвало.
Выпадающее меню Bootstrap не работает
У меня возникли проблемы с тем, чтобы мои выпадающие списки работали. Я могу заставить navbar отображаться отлично, но когда я нажимаю «выпадающий список» (любой из них), он не отображает раскрывающееся меню. Я пробовал смотреть на другие сообщения об этом, но ничего, что исправило проблемы каждого, не помогло. Я скопировал источник прямо с сайта bootstrap, но я не могу заставить его работать на моей машине. У кого-нибудь есть идеи? Я смотрел на него в течение часа и, кажется, не могу понять, что проблема.
18 ответов
и посмотреть, будет ли это работать.
У меня был проект bootstrap + rails, и выпадающий список работал нормально. Они перестали работать после обновления.
100% рабочего раствора
просто поместите ссылку Jquery в первую очередь ссылки js и css
Пример Правильного
Пример Неверный!
поместите ссылку jquery JS перед загрузочной ссылкой js следующим образом:
в случае, если кто-то еще сталкивается с той же проблемой, не забудьте проверить ваш код просмотр исходного кода страницы в вашем браузере, чтобы проверить, загружены ли все файлы jQuery и bootstrap и правильные пути к файлу. Самое главное! обязательно используйте последний стабильный файл jquery.
похоже, что для Rails 4 нужно сделать больше.
внутри вас Gemfile добавить.
Далее вам нужно запустить
это та часть, о которой никто не упоминал
откройте конфигурацию/приложение.рубидий файл
добавить этого права до второй конец
конфигурации.активы.предварительная компиляция += %w(*.формат PNG.* формат JPG.* в формате JPEG *.gif)
как видно здесь около 20% вниз по странице.
далее Создать заказ.стиль CSS.файл scss в этом каталоге
app / активы / таблицы стилей
как видно здесь немного дальше вниз от вышеуказанного задача
внутри этого файла Include
теперь остановите сервер и перезагрузите, и все должно работать нормально.
Я попытался запустить bootstrap без использования драгоценного камня, но это не сработало для меня.
надеюсь, что это поможет кому-то!
Я использую rails 4.0 и столкнулся с той же проблемой
вот мое решение, которое прошло испытание
добавить в Gemfile
затем добавьте в приложение / активы / javascripts / application.js
тогда выпадающий список должен работать
кстати, решение Криса также работает для меня.
но я думаю, что это меньше соответствует идее трубопроводных активов
Я думаю, что это вопрос маршрута ваш файл маршрута. Ни загрузочный файл, ни файл JQuery.
в моем случае, отключение расширений Chrome исправил. Я снимал их с хрома один за другим, пока не нашел виновника.
Так как я автор оскорбительного расширения Chrome, я думаю, что лучше исправить расширение!
моя версия bootstrap указывала на bootstap4-alpha,
и он начал работать
проблема в том, что href-href=»#» вы должны удалить href=»#» во всех тегах
для Bootstrap 4 вам нужна дополнительная библиотека. Если Вы читаете консоль браузера, Bootstrap фактически напечатает сообщение об ошибке, сообщающее вам, что вам это нужно для выпадающего списка.
в угловых проектах мы добавляем angular-cli.json или угловой.в JSON строки тезисы:
согласно getBootstrap.com, выпадающие списки построены на сторонней библиотеке Popper.js. Итак, если выпадающее меню не работает onclick, но работает только при наведении выпадающего меню include popper.Яш, ушко.JS и ушко.стиль CSS. Не считая Поппера.js перед включением пакетов bootstrap может быть одной из причин.
может быть, кто-то там может извлечь выгоду из этого:
резюме (a.к. a. tl; dr)
симптомы
при посещении сайта на локальный тестовый сервер django, это выглядело совершенно нормально на первый взгляд: стиль / макет с использованием bootstrap как и ожидалось, включая navbar. Однако все раскрывающиеся меню не удалось открыть.
нет ошибок в консоли браузера. Все статично js и css файлы были загружены успешно, а функциональность из других пакеты, полагающиеся на jquery работает, как ожидалось.
решение
откат django-bootstrap3==6.2.2 решил проблему для нас, хотя я понятия не имею, что именно вызвало это.
я попробовал все вышеперечисленные ответы и единственная версия, которая работает для меня-это jquery 1.11.1. Я пробовал со всеми другими версиями 1.3.2, 1.4.4, 1.8.2, 3.3.1 и выпадающее меню navbar не работает.
просто используйте этот 100% рабочий трюк, чтобы решить проблему выпадающего меню Bootstrap.
вставьте оба этих файла в любом месте страницы после открытия тега body. Если вы вставляете их внутри тега body, ваша проблема сохраняется.
Bootstrap 4 Dropdown Menu не работает?
Я скопировал официальный пример Bootstrap 4 для выпадающих меню, но он не работает, то есть ничего не выпадает.
10 ответов
Проверьте, есть ли jQuery и все соответствующие компоненты Bootstrap. Также проверьте консоль и убедитесь, что нет ошибок.
Добавьте этот код в ваш jquery
Я использовал NuGet для установки BootStrap 4. У меня также были проблемы, когда он не отображал выпадающий список при нажатии. Он продолжал выдавать ошибку в базе jquery, о чем говорила консоль Chrome.
У меня изначально было следующее
Но я изменил его, чтобы использовать вместо этого в комплекте версию, и она начала работать
Это проблема с popper.js файлом. На официальном сайте я обнаружил, что файлы комплекта включают в себя popper, но не jquery. Мне удалось это исправить, добавив ссылку на эти файлы:
Попробуйте добавить эти строки в конец файла
С помощью JavaScript Вызовите раскрывающиеся списки с помощью JavaScript:
Раскрывающиеся позиции размещаются благодаря Popper.js (кроме случаев, когда они содержатся в навигационной панели).
Включить их в этот порядок, это будет работать, я не знаю почему: D
Предполагая, что библиотеки Bootstrap и Popper были установлены с помощью диспетчера пакетов Nuget, для веб-приложения, использующего Visual Studio, в файле главной страницы (Site.Master), прямо под тегом body, добавьте ссылку на popper.min.js, введя:
Вот изображение для лучшего отображения местоположения:
Выпадающее меню Bootstrap не работает
У меня возникли проблемы с получением моего меню на работу. Я могу заставить navbar отлично отображаться, но когда я нажимаю на «выпадающее меню» (любой из них), он не отображает выпадающее меню. Я пробовал смотреть на другие сообщения об этом, но ничего, что исправило проблемы каждого, не помогло. Я скопировал источник прямо с сайта bootstrap, но я не могу заставить его работать на моей машине. У кого-нибудь есть идеи? Я смотрел на него в течение часа и не могу понять, что такое проблема.
18 ответов:
и посмотреть, если он будет работать.
У меня был проект bootstrap + rails, и выпадающий список работал нормально. Они перестали работать после обновления.
100% рабочего раствора
просто поместите ссылку Jquery в первую очередь ссылки js и css
Пример Правильного
Пример Неверный!
поставить ссылку на jQuery и JS, прежде чем связать начальной загрузки JS и вот так:
в случае, если кто-то еще сталкивается с той же проблемой, не забудьте проверить ваш код просмотр исходного кода страницы в вашем браузере, чтобы проверить, загружены ли все файлы jquery и bootstrap и правильные пути к файлу. Самое главное! убедитесь, что используете последнюю стабильную файл с jQuery.
похоже, что для Rails 4 нужно сделать больше.
внутри вас Gemfile добавить.
Далее вам нужно запустить
это та часть, о которой никто не упоминал
откройте конфигурацию / приложение.рубидий файл
добавить это прямо перед вторым до последнего конца
config.активы.предварительная компиляция += %w(*.формат PNG.* формат JPG.* в формате JPEG *.gif)
как видно здесь около 20% вниз по странице.
далее Создать заказ.стиль CSS.scss файл в этом каталоге
как видно здесь немного ниже от вышеизложенного задача
внутри этого файла Include
теперь остановите сервер и перезагрузите его, и все должно работать нормально.
Я попытался запустить bootstrap без использования драгоценного камня, но это не сработало для меня.
надеюсь, что это поможет кому-то!
Я использую rails 4.0 и столкнулся с той же проблемой
вот мое решение, которое прошло испытание
добавить в Gemfile
затем добавьте в приложение / активы / javascripts / application.js
тогда выпадающий список должен работать
кстати, решение Криса также работает для меня.
но я думаю, что это меньше соответствует идее трубопроводных активов
Я думаю, что это вопрос маршрута ваш файл маршрута. Ни загрузочный файл, ни файл JQuery.
в моем случае, отключение расширений Chrome исправил. Я удалил их из хрома один за другим, пока не нашел виновника.
Так как я автор оскорбительного расширения Chrome, я думаю, мне лучше исправить расширение!
моя версия bootstrap указывала на bootstap4-alpha,
и он начал работать
проблема в том, что href-это href=»#» вы должны удалить href=»#» во всех тегах
для Bootstrap 4 вам нужна дополнительная библиотека. Если Вы читаете консоль браузера, Bootstrap фактически напечатает сообщение об ошибке, сообщающее вам, что вам это нужно для выпадающего списка для работы.
в угловых проектах мы добавляем angular-cli.json или угловой.в JSON строки тезисы:
согласно getBootstrap.com, выпадающие списки построены на сторонней библиотеке Popper.js. Итак, если выпадающее меню не работает onclick, но работает только при наведении указателя мыши на выпадающее меню, включите popper.js, bootstrap.js и bootstrap.стиль CSS. Не считая Поппера.js перед включением пакетов bootstrap может быть одной из причин.
может быть, кто-то там может извлечь выгоду из этого:
резюме (a.k.a. tl;dr)
симптомы
при посещении сайта на локальный тестовый сервер django, это выглядело совершенно нормально на первый взгляд: стиль / макет с использованием bootstrap как и ожидалось, включая навигационную панель. Однако все выпадающие меню не удалось опустить.
нет ошибок в консоли браузера. Все статично js и css файлы были загружены успешно, и функциональность от других пакеты, полагающиеся на jquery работает, как ожидалось.
решение
откат django-bootstrap3==6.2.2 решил проблему для нас, хотя я понятия не имею, что именно вызвало его.
я попробовал все вышеперечисленные ответы и единственная версия, которая работает для меня-это jquery 1.11.1. Я пробовал со всеми другими версиями 1.3.2, 1.4.4, 1.8.2, 3.3.1 и выпадающий список navbar не работает.
просто используйте этот 100% рабочий трюк, чтобы решить проблему выпадающего меню Bootstrap.
вставьте оба этих файла в любом месте страницы после открытия тега body. Если вы вставляете их внутри тега тела, то ваша проблема сохраняется.
Выпадающие элементы
Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.
Обзор
Доступность
Стандарт WAI ARIA описывает и определяет виджет role=»menu» как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.
Примеры
Выпадающие элементы одинарных кнопок
Самое приятное то, что Вы можете сделать это и с любым вариантом кнопки:
Выпадающие элементы кнопок с разделенными зонами
Размеры
Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.
Темные выпадающие списки
И использовать его в навигационной панели:
Направления
«Выпадающий вверх»
«Выпадающий вправо»
«Выпадающий влево»
Пункты меню
Активные элементы меню
Неактивные элементы меню
Выравнивание меню
Отзывчивое выравнивание
Обратите внимание, что вам не нужно добавлять атрибут data-bs-display=»static» к выпадающим кнопкам на панелях навигации, поскольку Popper.js не используется на панелях навигации.
Варианты выравнивания
Можете воспользоваться примерами с различными вариантами выравнивания раскрывающегося списка.
Содержание меню
Заголовки меню
Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.
Dropdown header
Разделители меню
Разделяйте группы родственных элементов меню разделителем.
Текст
Размещайте любой текст внутри выпадающего меню с текстом, используя утилиты отступа. Заметьте, что вам понадобится дополнительная настройка размеров для ограничения ширины меню.
Some example text that’s free-flowing within the dropdown menu.
And this is more example text.
Формы
Расположите форму внутри выпадающего меню, и используйте утилиты отступа для ее уплотнения.
Параметры раскрывающегося списка
Поведение автоматического закрытия
Переменные
Переменные для всех выпадающих списков:
Переменные для курсоров на основе CSS, которые указывают на интерактивность раскрывающегося списка:
Миксины
Использование
Через атрибуты
Добавьте к ссылке или кнопке атрибут data-bs-toggle=»dropdown» для скрытия\показа выпадающего элемента.
Через JavaScript
Управляйте выпадающими элементами с помощью JavaScript:
data-bs-toggle=»dropdown» все еще требуется
Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-bs-toggle=»dropdown» всегда необходим в элементе, запускающем выпадающий элемент.
Параметры
Смещение раскрывающегося списка относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset=»10,20″
Дополнительную информацию смотрите в offset документации Popper.
Смещение раскрывающегося списка относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset=»10,20″
Дополнительную информацию смотрите в offset документации Popper.
Настройте поведение автоматического закрытия раскрывающегося списка:
Настройте поведение автоматического закрытия раскрывающегося списка:
Чтобы изменить конфигурацию Popper по умолчанию для Bootstrap, смотрите конфигурацию Popper.
Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Popper по умолчанию для Bootstrap. Это поможет Вам использовать и объединить настройки по умолчанию с Вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper.