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

100

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

<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-    target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" >
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

javascript jquery html css twitter-bootstrap user2540528
источник
1
Извините, на работе, когда я писал это. Я отредактировал объяснение.
user2540528
Не могли бы вы дать нам ссылку? @ user2540528
STP38
Ссылка на JS файл?
user2540528
1
Я просто скопировал ваш код и добавил js / css, и он работает на моей машине
Крис,
«Я скопировал исходный код прямо с сайта начальной загрузки» @ user2540528, вы можете дать мне эту ссылку?
STP38

Ответы:

142

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

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

Крис
источник
Это сделало это. Есть ли причина, по которой локальные файлы не работают? И эти источники js, если я разверну это в домене, правильно? Просто хочу убедиться, что мое приложение по-прежнему работает после того, как я его закончу и опубликую. (Это мой первый, поэтому я и спрашиваю)
user2540528
@ user2540528 Возможно, файл назван иначе jquery-1.11.0.jsили его вообще нет.
Крис
user2540528 Кажется, вы пропустили bootstrap.css
Avec
1
Моя проблема заключалась в том, что у меня был bootstrap.css в нужном месте, но в моем комплекте не было bootstrap.min.js
codingNightmares
Я понял, что порядок этих строк кода также важен. Если вы поместите API Google в последнюю строку кода, это не сработает.
Efe Büyük
114

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

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

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});
Иван Б.
источник
Решена проблема, с которой я столкнулся с Bootstrap 3 и Rails 4.2, когда раскрывающийся список работал только в первый раз, но не при втором щелчке.
bovender 02
Проект Grails с Spud CMS - это решило мою проблему с раскрывающимся списком.
Тайлер Рафферти
Большое вам спасибо за это 1. Все говорят: «Добавьте jquery перед загрузкой». но это было так. Это они только отвечают, после более чем часа поиска, что сработало!
MaNTiS
1
Это мне очень помогло. Есть идеи, зачем это исправление?
Brack
1
Это решение сработало для меня. Оказалось, что я дважды импортировал бутстрап на свой сайт, после того как я импортировал его только один раз, он начал работать без исправления в этом решении.
harshpatel991
27

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

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

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

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

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

<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
Хидаят Уллах
источник
В моем случае не сработало. Пришлось использовать раствор Ивана Б.
toddmo 02
1
@Nabin Это работает, потому что мы должны сначала загрузить jquery, а затем bootstrap, поскольку bootstrap использует jquery
Siddaram H
@toddmo Он работает, просто проверить Jquery, самозагрузки и CSS правильно или не загружается из вкладки networy в Google CROME dbugger
ЛМК
12

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

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

вместо того:

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
Сейибабс
источник
Put the jquery css ...>Put the jquery js ...
allcaps
2
Ваши слова верны, но блоки кода противоположны тому, что вы говорите.
Astra Bear,
4

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>

https://getbootstrap.com/docs/4.0/components/dropdowns/

никхилмет
источник
1
Для версии 4 это ответ, который является большим изменением, когда мы привыкли включать в наши проекты только JQuery и bootstrap.
Vindic
1
Да, порядок действительно имеет значение.
nikhilmeth
Это тот, который у меня сработал. Скопированы те же коды со страницы Bootstrap, но они должны быть в правильном порядке.
DuckRodgers,
3

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

Мохаммад Аль-Шаби
источник
2

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

Мунам Юсуф
источник
2

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

Резюме (он же 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для нас решил проблему, хотя я понятия не имею, что именно ее вызвало.

djvg
источник
1

Я использую rails 4.0 и столкнулся с той же проблемой

Вот мое решение, прошедшее проверку

добавить в Gemfile

gem 'bootstrap-sass'

бегать

bundle install

затем добавьте в app / assets / javascripts / application.js

//= require bootstrap

Тогда раскрывающийся список должен работать

Кстати, решение Криса у меня тоже работает.

Но я думаю, что это меньше соответствует идее конвейера активов.

user1143669
источник
0

Похоже, что для Rails 4 еще многое предстоит сделать.

  1. Внутри вас Gemfile add.

    драгоценный камень 'bootstrap-sass', '~> 3.2.0.2'

как видно здесь

  1. Далее вам нужно запустить

    $ bundle install

Это та часть, о которой никто не упомянул

Откройте файл config / application.rb

  1. добавьте это прямо перед предпоследним концом

    config.assets.precompile + =% w (*. png * .jpg * .jpeg * .gif)

как видно здесь, примерно на 20% вниз по странице.

  1. Затем создайте файл custom.css.scss в этом каталоге.

    приложение / активы / таблицы стилей

как показано здесь немного дальше от вышеуказанной задачи

  1. Внутри этого файла включите

    @import "бутстрап";

Теперь остановите сервер и перезапустите, и все должно работать нормально.

Я пытался запустить bootstrap без использования гема, но у меня это не сработало.

Надеюсь, это кому-то поможет!

Уэс Дафф
источник
0

Думаю дело в маршруте вашего файла маршрута. Ни бутстрап, ни файл JQuery.

Алвиан Касабланкас
источник
0

В моем случае это было исправлено отключением расширений Chrome. Я удалял их из Chrome один за другим, пока не нашел виновника.

Так как я являюсь автором оскорбительного расширения Chrome, я думаю, мне лучше исправить это расширение!

toddmo
источник
0

Моя версия начальной загрузки указывала на bootstap4-alpha,

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

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

Сиддарам Х
источник
0

проблема в том, что href - это href = "#", вы должны удалить href = "#" во всех тегах

Виктор Хименес
источник
0

Для Bootstrap 4 вам понадобится дополнительная библиотека. Если вы читаете консоль браузера, Bootstrap на самом деле напечатает сообщение об ошибке, говорящее о том, что он вам нужен для работы раскрывающегося списка.

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
ласкбо
источник
0

в проектах angular мы добавляем следующие строки angular-cli.json или angular.json:

      "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"

  ],
ATEF CHAREF
источник
0

Я попробовал все приведенные выше ответы, и единственная версия, которая мне подходит, - это jquery 1.11.1 . Я пробовал со всеми другими версиями 1.3.2, 1.4.4, 1.8.2, 3.3.1, и раскрывающееся меню панели навигации не работает.

<script src="jquery/jquery-1.11.1.min.js"></script>
Зик
источник
0

Если вы столкнулись с проблемой в Ruby on Rails , исчерпывающее решение предоставлено файлом readme Bootstrap Ruby Gem .

или короче:

  1. переименовать application.cssвapplication.scss
  2. Добавить @import "bootstrap";
  3. добавить gem 'jquery-rails'к , Gemfileесли она не существует.
  4. добавить //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets в application.js.
Эсмаил МИРЗАИ
источник