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

81

Я не могу заставить выпадающее меню начальной загрузки работать. Вот мой html для навигации:

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

А вот скрипты:

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

Что я делаю неправильно? Спасибо за ответы!

html drop-down-menu twitter-bootstrap Hjuster
источник
Проверьте мой ответ в аналогичной публикации stackoverflow.com/questions/15592158/…
Tejasvi Hegde
4
В моей проблеме отсутствовал файл bootstrap js на случай, если это поможет кому-то другому
Дрюдэвид
Я обновил свой, Gruntfile.jsкоторый изменяет некоторые пути в jsFileList... Обновление путей и выполнение соответствующих задач Grunt (grunt dev / grunt build / и т. Д.) Решило мою проблему.
Ken Prince
1
@Drewdavid Спасибо! Я пропал bootstrap.min.js и jquery
lucidbrot

Ответы:

11

Рабочая демонстрация: http://codebins.com/bin/4ldqp73

попробуй это 

<ul class='nav'>
  <li class='active'>Home</li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">            
        <li><a href="#">asds</a></li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>
гауранг171
источник
57
Раскрывающийся список в вашей демонстрации больше не работает, или, возможно, проблема в моем браузере.
Ной
154

У меня такая же проблема. После пары часов поиска неисправностей обнаружил, что,

я имел 

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

вместо,

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

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

Принц Ашитака
источник
1
Какая разница?
CodyBugstein 08
9
Imray, сценарий начальной загрузки регистрирует расширения для jQuery, поэтому, если jQUery не загружен, расширения никогда не регистрируются.
Amoliski
2
Порядок действительно важен. Спасибо за помощь!
K.Land_bioinfo
Благодарю. Работал также для моего проекта angular 10 в файле
angular.json
86

У меня была такая же проблема, когда я bootstrap.min.jsдважды включил . Удалил один из них и он заработал.

Кубилай
источник
1
Это устранило мою проблему. Мое Угловое приложение было вытягивать в нескольких копиях начальной загрузки через задачу глотка , чтобы придать мой bower_components
Pakage
Это устранило мою проблему. Спасибо
Yudu Ban
это исправило его в проекте ASP.NET MVC 5 с
пакетами
Исправил для меня. Благодарю.
Генри А.
действительно раздражает ... используя aurelia-webpack-скелет, мне нужно импортировать bootstrap.css в мой main.js, но если я импортирую 'bootstrap', я получаю это странное поведение ...
иронично
23

К сведению: если у вас есть bootstrap.js, вам не следует добавлять bootstrap-dropdown.js.

Я не уверен в результате с bootstrap.min.js.

Фаренгейт
источник
2
Благодарю. У меня были и dropdown.js, и bootstrap.js, поэтому это не сработало. Удаление dropdown.js решило проблему.
nyxz
Вы лучший человек, я потратил около 6 часов, чтобы найти, в чем проблема !!, еще раз спасибо ..
Адель
1
Большое спасибо! У меня такая же проблема, но есть bootstrap.jsи bootstrap.min.js.. Когда удалил последний, работает.
1
Спасибо - В моем случае, у меня было так js/bootstrap.jsкакjs/dropdown.js
Санджай Манохаром
13

Для вашего стиля вам необходимо включить файлы css начальной загрузки, обычно непосредственно перед </head>элементом

<link href="css/bootstrap.css" rel="stylesheet">

Затем вам нужно будет включить файлы js, рекомендуется включать их в конец документа, как правило, до того, как </body>страницы загрузятся быстрее.

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>
Ssàmâ Höûd
источник
8

Добавьте следующие строки в теги тела.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>
Шевон Сильва
источник
Спасибо, это сэкономило мне время.
DrewT
7

вы должны импортировать эти файлы в <head></head>свой html.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Мартин
источник
1
Понятия не имею, почему или что я делал неправильно, но этот ответ сделал это за меня. Спасибо, Мартин!
dghalbr
Спасибо. Я тоже не знаю, почему это решило проблему. Меню нормально работало с /js/jquery.js и /js/bootstrap.min.js до тех пор, пока веб-сайт не был перенесен на другой сервер Windows.
Гонконг
5

Вы включили jquery.js?

Также сравните эту строку кода со своей:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

Смотрите эту версию, которая работает нормально.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>
Франклин
источник
4

Должны быть включены как bootstrap, так и jquery:

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

ПРИМЕЧАНИЕ: версия jquery-xxxmin.js должна быть версии 2.xx !!!

Дэвид Ляо
источник
4

Я понял это, и самый простой способ сделать это - просто скопировать и пропустить CDN ссылки начальной загрузки, которую можно найти в https://www.bootstrapcdn.com/, и сценарии Jquery CDN, которые можно найти здесь https: // code.jquery.com/, и после копирования ссылок ссылки начальной загрузки вставляются в заголовок HTML, а сценарий Jquery Script вставляется в тело HTML, как в примере ниже:

    <!DOCTYPE html>
    <html>
      <head>

        <title>Purrfect Match Landing Page</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--<link rel="stylesheet" href="griddemo.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

      </head>

      <body>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">      </script>    
      </body>
    </html>

Для меня работает отлично, надеюсь, это сработает и для вас :)

Атдхе Куртеши
источник
Спасибо ! , перемещая его до того, как </body>теги заставили его работать с моей стороны!
Райан Акино,
2

Попробуйте это в разделе заголовка

<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.min.js из моего проекта и добавил к нему bootstrap.js, и он начал работать ........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));
Мохит Дхаван
источник
Добавление к #kubilay Ответ: у вас может быть один класс с именем «A» для каждого документа. .min.css / .min.js - это, как правило, одни и те же файлы css и js, в которых удалены все пробелы. Это делает их меньше и быстрее загружается. Браузеру в любом случае не нужны пробелы.
Mohit Dhawan
Удалите один, если использовали оба
Мохит Дхаван
2

Попробуйте этот код:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Нишант Ингл
источник
1

Вам нужно будет проверить конфликтующие файлы / свойства css, например, у вас может быть содержимое настраиваемого стиля ".nav" в другом месте, попробуйте отключить свои собственные файлы css и проверить, работает ли это, затем проверьте, какой файл или настраиваемый стиль вызывает конфликты, также убедитесь, что вы включаете bootstrap.min.js в свой код

Mancy
источник
1

У меня была аналогичная проблема, только чтобы заметить, что я дважды добавил сценарий начальной загрузки, а второй сценарий начальной загрузки был после выше сценарием Jquery.

Решение:

  • Убедитесь, что bootstrap.min.js и jquery.min.js включены в ваш файл только один раз.
  • Скрипт bootstrap.min.js должен быть включен после jquery.min.js
BK
источник
1

Скопируйте и вставьте ниже jQuery <script>и таблицу стилей <link>в свой, <head>чтобы убедиться, что вы загружаете все необходимые файлы.

Важно, чтобы ваш .jsфайл JQuery находился над .cssтаблицей стилей.

Просто вставьте следующую строку, чтобы проверить

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Проблема возникает в основном при загрузке скрипта jQuery, убедитесь, что вы правильно добавили ссылки.

Теперь проверьте

Тем не менее, если это не сработает, проверьте веб-сайт начальной загрузки, у которого есть образец реализации.

https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

Амир Дора.
источник
1

Для последней версии Bootstrap вам понадобится Popper.js

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Скопируйте ссылку в разделе «Конец тела» непосредственно перед <body>тегом внутри <Head>тега.

Саид Мухаммад Идрис
источник
1

Я только что добавил JSчасть bootstrapна свою страницу индекса, и все

заработало. Вставьте это, если вы используете последнюю версию начальной загрузки.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
лекарство
источник
Это вопрос восьмилетней давности с принятым ответом ...
Жолт Месарош
@ZsoltMeszaros Да, я знаю. Но есть и другие люди, которые могут столкнуться с этой проблемой
mecdeality
0

У меня была та же проблема, которая привела меня сюда.

Моя проблема: я использовал рекомендованную версию jquery 1.12.0 в качестве файла сценария jquery.

Решение: заменил скрипт jquery на версию jquery 2.2.0.

Это решило проблему для меня.

Эверест Нвосу
источник
0

Для меня это была проблема CORS. Я удалилcrossorigin="anonymous" из своего скрипта теги импорта, и он снова заработал.

Кстати, последние теги скриптов в правильном порядке всегда можно найти здесь: https://getbootstrap.com/

Изменить: по-видимому, добавление deferк scriptтегу также сломает все вкусности Bootstrap.

Кэмерон Хадсон
источник
0

Скопируйте / вставьте ссылку CSS, за которой следует ссылка JS с сайта начальной загрузки, здесь . Тогда выпадающий список должен работать.

Моя страница выглядит так:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <title>Website Title</title>
  </head>
  <body>
    <div id="content" />
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </body>
</html>

(Навбар отсюда )

Pro Q
источник
0

Проверьте библиотеку popper.js, потому что у меня была такая же проблема, вы можете найти CDN bootstrap, jquery и popper для выпадающего списка на https://getbootstrap.com/ или просто скопируйте следующие теги сценария

Нечеерван Абдулла
источник
0

Моя (такая же) проблема возникла, когда я перепутал версии css и bootstrap. Я использовал bootstrap.min.js версии 3 с bootstrap.min.css версии 4.5

Если вы недавно загрузили или перезаписали кучу файлов css и js в свою статическую папку, это будет хорошим местом для начала.

Удачи.

PowerAktar
источник
-1

У меня была установка с Angular 7, jQuery 3.4.1, Popper 1.12.9 и Bootstrap 4.3.1, у меня ничего не работало, пока я сделал этот небольшой хак в стилях:

.dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

Html выглядит так:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>
0lukasz0
источник