it-swarm.com.ru

Выпадающее меню начальной загрузки не работает

У меня проблемы с тем, чтобы мои выпадающие списки работали. Я могу заставить навигационную панель отображаться идеально, но когда я нажимаю «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 -->

79
user2540528

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

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

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

124
Chris

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

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

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

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

Поместите ссылку 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
Seyibabs

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

2
Mohammad AlShaabi

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

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

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

1
djvg

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

1
Munam Yousuf

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

0
Alvian Casablancas

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

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

добавить в Gemfile

gem 'bootstrap-sass'

бежать

bundle install

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

//= require bootstrap

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

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

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

0
user1143669

Согласно 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/

0
nikhilmeth

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

  1. Внутри вас 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";


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

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

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

0
Wes Duff

Моя версия начальной загрузки указывала на 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
Siddaram H

Я попробовал все приведенные выше ответы, и единственная версия, которая работает для меня, это 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
Zeke

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

0
Victor Jimenez

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

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

0
toddmo

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

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

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

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

  ],
0
ATEF CHAREF