Спадне меню завантаження не працює


100

У мене виникають проблеми з тим, щоб мої спадні файли працювали. Я можу змусити навігацію відображатися ідеально, але коли я натискаю кнопку "Випадаюче меню" (будь-яке з них), воно не відображає спадне меню. Я спробував розглянути інші повідомлення про це, але нічого, що вирішило проблеми кожного, не допомогло. Я скопіював джерело прямо з веб-сайту 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 -->


1
Вибачте, на роботі, коли я це писав. Я відредагував пояснення.
користувач2540528

Не могли б ви надіслати нам посилання? @ user2540528
STP38

Посилання на файл JS?
користувач2540528

1
Я щойно скопіював ваш код і додав js / css, і він працює на моїй машині
Chris

"Я скопіював джерело прямо з веб-сайту завантажувача" @ 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

Я зрозумів, що порядок цих рядків коду також важливий. Якщо ви поставите google apis в якості останнього рядка коду, він не працює.
Ефе Бююк

114

У мене був проект bootstrap + rails, і спадне місце працювало чудово. Вони перестали працювати після оновлення ...

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

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

Вирішено проблему з Bootstrap 3 та Rails 4.2, коли спадне меню буде працювати лише в перший раз, але не при другому натисканні.
bovender

Проект Grails w / Spud CMS - Це вирішило мою проблему перемикання, що випадає.
Тайлер Рафферті

дякую так за це 1. Всі говорять "додати jquery перед початковим завантаженням". але це було так. Це вони лише відповідають, продивившись більше години, що спрацювали!
MaNTiS

1
Це мені надзвичайно допомогло. Будь-яка ідея, навіщо це виправлення?
Брек

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

1
@Nabin Це працює, тому що ми повинні спочатку завантажити jquery, а потім завантажувальний, оскільки bootstrap використовує jquery
Siddaram H

@toddmo Це працює, просто перевірте, чи правильно завантажено jquery, bootstrap та css, чи не з вкладки networy в Google dromegger Google Crome
LMK

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
Ваші слова правильні, але кодові блоки - це протилежне тому, що ви говорите.
Ведмідь Астра

4

За даними getBootstrap.com, спадні файли будуються на сторонній бібліотеці Popper.js. Отже, якщо меню, що випадає, не працює onclick, але працює лише на наведення курсора, включаючи 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.
Віндіч

1
Так, порядок дійсно має значення.
nikhilmeth

Це той, який працював на мене. Скопіювали ті самі коди зі сторінки Bootstrap, але це правильний порядок, яким вони повинні бути.
DuckRodgers

3

Я стикався з цим під час використання форм ASP .NET. Я використовував рішення: видалення або коментування посилань jQuery і Bootstrap зі <asp:ScriptManager runat="server">сторінки на головній сторінці. Здається, це створює конфлікт із посиланнями jQuery і Bootstrap, які ви ставите в <header>.


2

У випадку, якщо хтось все ще стикається з тією самою проблемою, не забудьте перевірити джерело сторінки перегляду у своєму браузері, щоб перевірити, чи всі файли jquery та bootstrap завантажені та чи правильні шляхи до файлу. Найважливіший! обов'язково використовуйте останній стабільний файл jquery.


2

Можливо, хтось там може скористатися цим:

Підсумок (aka 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

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

Ось моє рішення, яке пройшло тест

додати до Gemfile

gem 'bootstrap-sass'

бігати

bundle install

потім додайте в додаток / активи / javascripts / application.js

//= require bootstrap

Тоді спадне меню повинно працювати

До речі, рішення Кріса також працює для мене.

Але я вважаю, що це менш відповідає ідеї про створення активів


0

Схоже, що для Rails 4 потрібно ще зробити.

  1. Всередині вас додайте Gemfile.

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

як видно тут

  1. Далі потрібно бігти

    $ bundle встановити

Це частина, про яку ніхто не згадував

Відкрийте файл config / application.rb

  1. додайте це прямо перед другим до останнього кінця

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

як тут видно на 20% вниз на сторінці.

  1. Далі створіть у цьому каталозі файл custom.css.scss

    програми / таблиці / таблиці стилів

як видно тут трохи далі від вищезазначеного завдання

  1. Всередині цього файлу включають

    @import "завантажувач";


Тепер зупиніть ваш сервер і перезапустіть, і все повинно працювати добре.

Я спробував запустити завантажувальний інструмент, не використовуючи дорогоцінний камінь, але мені це не вийшло.

Сподіваюся, що хтось допоможе!



0

У моєму випадку відключення розширень Chrome виправлено. Я видаляв їх із Chrome один за одним, поки не знайшов винуватця.

Оскільки я автор правопорушного розширення Chrome, я вважаю, що краще виправити розширення!


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

Для завантаження 4 вам потрібна додаткова бібліотека. Якщо ви читаєте консоль веб-переглядача, Bootstrap фактично надрукує повідомлення про помилку, повідомляючи, що вам це потрібно для того, щоб вийти на роботу.

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

0

у кутових проектах ми додаємо рядки тегів angular-cli.json або angular.json:

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

  ],

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.
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.