Почему не работает dropdown bootstrap

Выпадающее меню Bootstrap 5 не работает

Как относительный новичок в Bootstrap, я пытался закодировать меню с раскрывающимися списками. Код приведен ниже, но я обнаружил некоторые проблемы:

1. Код меню был скопирован из документации GetBootstrap.com. Посмотрел на других сайтах, где может быть проблема, пробовал альтернативы, но безуспешно.
2. bootstrap.min.css и bootstrap.bundle.min.js, обе версии 5, были связаны с кодом. Пробовали эти файлы прямо на сайте и по ссылкам. Также пробовал popper.js плюс bootstrap.min.js; тот же результат.
3. Прямые ссылки работают, а раскрывающаяся часть — нет. Щелчок по раскрывающемуся элементу ничего не дает. Было бы здорово, если бы он отображался при наведении курсора и оставался на месте, чтобы можно было нажимать подпункты.
4. Меню должно быть в правой части экрана; глядя на ответы, ms-auto должен это сделать. Это не.
5. Когда экран свернут до размера планшета или телефона, меню переходит к ожидаемому сжатому символу, но не работает вообще; при нажатии ничего не будет отображаться.

3 ответа

Использование CDN для интеграции ресурсов Bootstrap 5.0.0-beta3 должно работать.

Надеюсь, это вам поможет!

Не стесняйтесь проголосовать за ответ

dropdown должен быть классом .. а не атрибутом:

Спасибо вам обоим Manifest Man и Зиму. Я использовал более раннюю версию bootstrap 5, и когда использовались последние версии bootstrap.min.css и bootstrap.bundle.min.js, он начал работать.

Кроме того, да, раскрывающийся список — это класс, а не атрибут.

Источник

Выпадающее меню Bootstrap не работает

У меня возникли проблемы с тем, чтобы мои выпадающие списки работали. Я могу заставить navbar отображаться отлично, но когда я нажимаю «выпадающий список» (любой из них), он не отображает раскрывающееся меню. Я пробовал смотреть на другие сообщения об этом, но ничего, что исправило проблемы каждого, не помогло. Я скопировал источник прямо с сайта bootstrap, но я не могу заставить его работать на моей машине. У кого-нибудь есть идеи? Я смотрел на него в течение часа и, кажется, не могу понять, что проблема.

18 ответов

и посмотреть, будет ли это работать.

У меня был проект bootstrap + rails, и выпадающий список работал нормально. Они перестали работать после обновления.

Это решение, которое исправило проблему, добавьте следующее .файл js:

100% рабочего раствора

просто поместите ссылку Jquery в первую очередь ссылки js и css

Пример Правильного

Пример Неверный!

поместите ссылку jquery JS перед загрузочной ссылкой js следующим образом:

в случае, если кто-то еще сталкивается с той же проблемой, не забудьте проверить ваш код просмотр исходного кода страницы в вашем браузере, чтобы проверить, загружены ли все файлы jQuery и bootstrap и правильные пути к файлу. Самое главное! обязательно используйте последний стабильный файл jquery.

я столкнулся с этим, когда я использовал ASP .NET Forms. Решение, которое я использовал, удаляло или комментировало ссылки jQuery и Bootstrap из на главной странице. Кажется, это создает конфликт с ссылками jQuery и Bootstrap, которые вы помещаете в .

похоже, что для 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,

изменить на 4-бета

и он начал работать

проблема в том, что 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)

раскрывающиеся списки Bootstrap перестали падать из-за обновления с django-bootstrap3 версия 6.2.2 to 11.0.0 .

мы столкнулись с аналогичной проблемой в наследии django сайт, который сильно зависит от bootstrap через django-bootstrap3 . Сайт всегда работал нормально и продолжал работать в производстве, но не на нашей локальной тестовой системе. Там не было очевидные связанные изменения в коде, поэтому проблема зависимости была наиболее вероятной.

симптомы

при посещении сайта на локальный тестовый сервер django, это выглядело совершенно нормально на первый взгляд: стиль / макет с использованием bootstrap как и ожидалось, включая navbar. Однако все раскрывающиеся меню не удалось открыть.

нет ошибок в консоли браузера. Все статично js и css файлы были загружены успешно, а функциональность из других пакеты, полагающиеся на jquery работает, как ожидалось.

решение

выяснилось, что django-bootstrap3 пакет в нашей локальной среде python был обновлен до последней версии, 11.0.0 , тогда как сайт был построен с использованием 6.2.2 .

откат 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 не работает

Мне не удается заставить мои раскрывающиеся списки работать. Я могу заставить навигационную панель отображаться идеально, но когда я нажимаю «Раскрывающийся список» (любой из них), оно не отображает раскрывающееся меню. Я пробовал искать другие сообщения об этом, но ничего, что решало бы проблемы всех, не помогло. Я скопировал исходный код прямо с веб-сайта начальной загрузки, но не могу заставить его работать на моей машине. У кого-нибудь есть идеи? Я смотрел на это в течение часа и, кажется, не могу понять, в чем проблема.

Может попробовать с

и посмотрим, сработает ли это.

У меня был проект bootstrap + rails, и выпадающий список работал нормально. Они перестали работать после обновления .

Это решение, которое устранило проблему, добавьте следующее в файл .js:

100% рабочий раствор

просто поместите ссылку JQuery в первую очередь ссылки js и css

Пример правильный

Пример неверный!

Поместите ссылку jquery js перед ссылкой bootstrap js следующим образом:

Согласно getBootstrap.com, выпадающие списки построены на сторонней библиотеке Popper.js. Итак, если раскрывающееся меню не работает при нажатии, а работает только при наведении курсора на раскрывающийся список, включите popper.js, bootstrap.js и bootstrap.css. Одной из причин может быть отказ от popper.js до включения пакетов начальной загрузки.

Я столкнулся с этим, когда использовал ASP .NET Forms. Решение, которое я использовал, заключалось в удалении или комментировании ссылок jQuery и Bootstrap на главной странице. Похоже, это создает конфликт со ссылками на jQuery и Bootstrap, которые вы помещаете в файл .

Если кто-то по-прежнему сталкивается с той же проблемой, обязательно проверьте источник вашей страницы просмотра в браузере, чтобы проверить, все ли файлы jquery и bootstrap загружены, а пути к файлу верны. Самое важное! обязательно используйте последний стабильный файл jquery.

Может быть, кому-то это пригодится:

Резюме (он же tl; dr)

Выпадающие меню Bootstrap перестали выпадать из-за обновления с django-bootstrap3 версии 6.2.2 до 11.0.0 .

Задний план

Мы столкнулись с аналогичной проблемой на устаревшем django сайте, который сильно зависит от bootstrap сквозного django-bootstrap3 . Сайт всегда работал нормально и продолжал работать в продакшене, но не в нашей локальной тестовой системе. В коде не было очевидных связанных изменений, поэтому, скорее всего, возникла проблема с зависимостью.

Симптомы

При посещении сайта на локальном тестовом сервере django он на первый взгляд выглядел отлично: стиль / макет использовались, bootstrap как ожидалось, включая панель навигации. Однако все раскрывающиеся меню не раскрылись.

Ошибок в консоли браузера нет. Все статические файлы js и css файлы были загружены успешно, а функциональные возможности других пакетов, на которые полагались, jquery работали должным образом.

Решение

Оказалось, что django-bootstrap3 пакет в нашей локальной среде python был обновлен до последней версии 11.0.0 , а сайт был построен с использованием 6.2.2 .

Откат django-bootstrap3==6.2.2 для нас решил проблему, хотя я понятия не имею, что именно ее вызвало.

Источник

Bootstrap Dropdown menu is not working

I am having trouble getting my dropdowns to work. I can get the navbar to show up perfectly, but when I click on «Dropdown» (either of them) it does not display the dropdown menu. I have tried looking on other posts about this, but nothing that fixed everyone’s problems helped. I copied the source straight from bootstrap’s website, but I can’t seem to get it to work on my machine. Anyone have any ideas? I have been staring at it for an hour and can’t seem to figure out what the problem is.

19 Answers 19

and see if it will work.

I had a bootstrap + rails project, and dropdown worked fine. They stopped to works after an update.

This is the solution that fixed the problem, add the following to .js file:

100% working solution

just place your Jquery link first of all js and css links

Example Correct

Example Wrong!

Put the jquery js link before the bootstrap js link like so:

According to getBootstrap.com (version 4), dropdowns are built on third-party library Popper.js. So, if the dropdown menu does not work onclick but is working only on hover of the dropdown include popper.js, bootstrap.js and bootstrap.css. Not including popper.js before including bootstrap bundles could be one of the reasons.

I faced this while I was using ASP .NET Forms. The solution I used was deleting or commenting out jQuery and Bootstrap references from the in the master page. It seems it creates a conflict with the jQuery and Bootstrap references that you put in the .

In case anyone still facing same problem be sure to check your your view Page source in your browser to check whether all the jquery and bootstrap files are loaded and paths to the file are correct. Most important! make sure to use latest stable jquery file.

Maybe someone out there can benefit from this:

Summary (a.k.a. tl;dr)

Bootstrap dropdowns stopped dropping down due to upgrade from django-bootstrap3 version 6.2.2 to 11.0.0 .

Background

We encountered a similar issue in a legacy django site which relies heavily on bootstrap through django-bootstrap3 . The site had always worked fine, and continued to do so in production, but not on our local test system. There were no obvious related changes in the code, so a dependency issue was most likely.

Symptoms

When visiting the site on the local django test server, it looked perfectly O.K. at first glance: style/layout using bootstrap as expected, including the navbar. However, all dropdown menus failed to drop down.

No errors in the browser console. All static js and css files were loaded successfully, and functionality from other packages relying on jquery was working as expected.

Solution

It turned out that the django-bootstrap3 package in our local python environment had been upgraded to the latest version, 11.0.0 , whereas the site was built using 6.2.2 .

Rolling back to django-bootstrap3==6.2.2 solved the issue for us, although I have no idea what exactly caused it.

Источник

Не работает dropdown (bootstrap)

Стаж: 8 лет 4 месяца

Сообщений: 418
Благодарностей: 218
Полезность: 449

Gani97Kz

dropdown.js лежит на папке. Стаж: 7 лет 10 месяцев Сообщений: 112 Благодарностей: 54 Полезность: 0

Стаж: 8 лет 4 месяца Сообщений: 418 Благодарностей: 218 Полезность: 449

Использую готовую bootstrap.js. jQuery линк от google Стаж: 7 лет 10 месяцев Сообщений: 112 Благодарностей: 54 Полезность: 0

Стаж: 8 лет 4 месяца Сообщений: 418 Благодарностей: 218 Полезность: 449

+function ($) < ‘use strict’; var backdrop = ‘.dropdown-backdrop’ var toggle = ‘[data-toggle=dropdown]’ var Dropdown = function (element) < $(element).on(‘click.bs.dropdown’, this.toggle) > Dropdown.prototype.toggle = function (e) < var $this = $(this) if ($this.is(‘.disabled, :disabled’)) return var $parent = getParent($this) var isActive = $parent.hasClass(‘open’) if (!isActive) < if (‘ontouchstart’ in document.documentElement && !$parent.closest(‘.navbar-nav’).length) < // if mobile we use a backdrop because click events don’t delegate $(‘ var relatedTarget = < relatedTarget: this > $parent.trigger(e = $.Event(‘show.bs.dropdown’, relatedTarget)) if (e.isDefaultPrevented()) return $parent .toggleClass(‘open’) .trigger(‘shown.bs.dropdown’, relatedTarget) Dropdown.prototype.keydown = function (e) < if (!/(38|40|27)/.test(e.keyCode)) return if ($this.is(‘.disabled, :disabled’)) return var $parent = getParent($this) var isActive = $parent.hasClass(‘open’) if (!isActive || (isActive && e.keyCode == 27)) < if (e.which == 27) $parent.find(toggle).focus() return $this.click() > var desc = ‘ li:not(.divider):visible a’ var $items = $parent.find(‘[role=menu]’ + desc + ‘, [role=listbox]’ + desc) if (!$items.length) return var index = $items.index($items.filter(‘:focus’)) if (e.keyCode == 38 && index > 0) index— // up if (e.keyCode == 40 && index Поблагодарили 0 раз Поблагодарили 0 раз Стаж: 7 лет 10 месяцев Сообщений: 112 Благодарностей: 54 Полезность: 0 Источник Оцените статью Вам также может понравиться Как в телевизоре убрать безопасный режим По умолчанию в телевизоре могут стоять задачи, которые Домашний кинотеатр. Улучшаем параметры Для того, чтобы улучшить качество изображения и звука Как починить наушники в случае их поломки Не у каждого человека в доме есть паяльник. Правообладателям Политика конфиденциальности Контакты