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

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

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

Ответы

Ответ 1

Возможно, попробуйте с

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

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

Ответ 2

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

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

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

Ответ 3

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>

Ответ 4

Поместите 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>

Ответ 5

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

Ответ 6

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

  • Внутри вы добавляете Gemfile.

    gem '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";

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

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

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

Ответ 7

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

Вот мое решение, которое прошло тест

добавить в Gemfile

gem 'bootstrap-sass'

бег

bundle install

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

//= require bootstrap

Затем выпадающее меню должно работать

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

Просто используйте этот 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>