Выпадающее меню 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 -->






3158   18  

18 ответов:

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

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

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

119  
2014-03-13 17:49:13

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

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

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});
90  
2015-03-12 11:30:03

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>
22  
2015-03-10 15:44:19

поставить ссылку на 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>
11  
2017-01-06 22:44:54

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

1  
2015-09-22 20:14:13

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

1  
2017-07-12 07:20:22

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

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

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

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

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

    $ bundle install

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

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

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

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

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

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

    приложения/активов/стили

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

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

    @import "bootstrap";

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

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

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

0  
2014-10-09 06:28:47

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

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

добавить в Gemfile

gem 'bootstrap-sass'

выполнить

bundle install

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

//= require bootstrap

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

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

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

0  
2014-11-01 17:42:31

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

0  
2016-02-14 05:55:56

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

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

0  
2017-04-27 20:09:54

моя версия 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>

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

0  
2018-01-14 10:03:16

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

0  
2018-06-06 01:40:38

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

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
0  
2018-07-06 17:06:22

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

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

  ],
0  
2018-08-15 13:35:34

согласно getBootstrap.com, выпадающие списки построены на сторонней библиотеке Popper.js. Итак, если выпадающее меню не работает onclick, но работает только при наведении указателя мыши на выпадающее меню, включите popper.js, bootstrap.js и bootstrap.стиль 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/

0  
2018-08-16 22:30:30

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

резюме (a.k.a. tl;dr)

выпадающие списки Bootstrap перестали выпадать из-за обновления с django-bootstrap3 версия 6.2.2 to 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 решил проблему для нас, хотя я понятия не имею, что именно вызвало его.

0  
2018-10-03 16:00:46

я попробовал все вышеперечисленные ответы и единственная версия, которая работает для меня-это 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>
0  
2018-10-03 20:02:04

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

вставьте оба этих файла в любом месте страницы после открытия тега 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>
-3  
2015-03-19 20:48:14

Comments

    Ничего не найдено.
Click here to cancel reply.