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

Question

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

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

<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 -->

75

css html javascript jquery twitter-bootstrap

автор: Bob Horn

18 ответов

автор: Chris · Accepted Answer · 2014-03-13 15:49:13

можно попробовать

<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">

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

автор: Iwan B. · Accepted Answer · 2015-03-12 09:30:03

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

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

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});

автор: Hidayat ullah · Accepted Answer · 2015-03-10 13:44:19

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>

автор: Seyibabs · Accepted Answer · 2017-01-06 20:44:54

поместите ссылку jquery JS перед загрузочной ссылкой 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>

автор: Munam Yousuf · Accepted Answer · 2015-09-22 17:14:13

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

автор: Mohammad AlShaabi · Accepted Answer · 2017-07-12 04:20:22

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

автор: Wes Duff · Accepted Answer · 2014-10-09 03:28:47

похоже, что для Rails 4 нужно сделать больше.

внутри вас Gemfile добавить.

gem 'bootstrap-sass', '~ > 3.2.0.2'

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

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

$ bundle install

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

откройте конфигурацию/приложение.рубидий файл

добавить этого права до второй конец

конфигурации.активы.предварительная компиляция += %w(*.формат PNG.* формат JPG.* в формате JPEG *.gif)

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

далее Создать заказ.стиль CSS.файл scss в этом каталоге

app / активы / таблицы стилей

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

внутри этого файла Include

@import "bootstrap";

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

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

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

автор: user1143669 · Accepted Answer · 2014-11-01 15:42:31

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

вот мое решение, которое прошло испытание

добавить в Gemfile

gem 'bootstrap-sass'

выполнить

bundle install

затем добавьте в приложение / активы / javascripts / application.js

//= require bootstrap

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

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

но я думаю, что это меньше соответствует идее трубопроводных активов

автор: Alvian Casablancas · Accepted Answer · 2016-02-14 03:55:56

Я думаю, что это вопрос маршрута ваш файл маршрута. Ни загрузочный файл, ни файл JQuery.

автор: toddmo · Accepted Answer · 2017-04-27 17:09:54

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

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

автор: Siddaram H · Accepted Answer · 2018-01-14 08:03:16

моя версия bootstrap указывала на 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>

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

автор: Victor Jimenez · Accepted Answer · 2018-06-05 22:40:38

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

автор: luskbo · Accepted Answer · 2018-07-06 14:06:22

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

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

автор: ATEF CHAREF · Accepted Answer · 2018-08-15 10:35:34

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

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

  ],

автор: nikhil · Accepted Answer · 2018-08-16 19:30:30

согласно getBootstrap.com, выпадающие списки построены на сторонней библиотеке Popper.js. Итак, если выпадающее меню не работает onclick, но работает только при наведении выпадающего меню include popper.Яш, ушко.JS и ушко.стиль CSS. Не считая Поппера.js перед включением пакетов bootstrap может быть одной из причин.

<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/

автор: Dennis · Accepted Answer · 2018-10-03 13:00:46

может быть, кто-то там может извлечь выгоду из этого:

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

автор: Zeke · Accepted Answer · 2018-10-03 17:02:04

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

<script src="jquery/jquery-1.11.1.min.js"></script>

автор: Manish Bajpai · Accepted Answer · 2015-03-19 18:48:14

просто используйте этот 100% рабочий трюк, чтобы решить проблему выпадающего меню Bootstrap.

вставьте оба этих файла в любом месте страницы после открытия тега body. Если вы вставляете их внутри тега body, ваша проблема сохраняется.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>