Menu rozwijane Bootstrap nie działa

81

Nie mogę uruchomić menu rozwijanego bootstrap. Oto mój html dla nav:

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

A oto skrypty:

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

Co ja robię źle? Dzięki za odpowiedzi!

html drop-down-menu twitter-bootstrap hjuster
źródło
Sprawdź moją odpowiedź pod podobnym
postem
4
Mój problem polegał na braku pliku bootstrap js, na wypadek, gdyby to pomogło komuś innemu
Drewdavid
Zaktualizowałem mój, Gruntfile.jsktóry zmienia niektóre ścieżki w jsFileList... Aktualizacja ścieżek i uruchamianie odpowiednich zadań Grunt (grunt dev / grunt build / etc) rozwiązało mój problem.
Ken Prince
1
@Drewdavid Thanks! Brakowało mnie bootstrap.min.js i jquery
lucidbrot

Odpowiedzi:

11

Działające demo: http://codebins.com/bin/4ldqp73

Spróbuj tego 

<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>
gaurang171
źródło
57
Wydaje się, że menu w Twoim demo już nie działa lub być może problem dotyczy mojej przeglądarki.
Noah
154

Miałem ten sam problem. Po kilku godzinach rozwiązywania problemów okazało się, że

miałem 

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

zamiast,

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

Mam nadzieję, że to komuś pomoże

Książę Ashitaka
źródło
1
Co za różnica?
CodyBugstein,
9
Imray, skrypt bootstrap rejestruje rozszerzenia jQuery, więc jeśli jQUery nie jest załadowane, rozszerzenia nigdy nie są rejestrowane.
Amoliski
2
Porządek jest rzeczywiście ważny. Dzięki za pomoc!
K.Land_bioinfo
Dzięki. Pracowałem również dla mojego projektu angular 10 w pliku
angular.json
86

Miałem ten sam problem, kiedy dodałem bootstrap.min.jsdwa razy. Usunął jeden z nich i zaczął działać.

kubilay
źródło
1
To rozwiązało mój problem. Moja aplikacja kątowa pobierała wiele kopii bootstrapu przez zadanie łyka, aby wstrzyknąć moje bower_components
Pakage
To rozwiązało mój problem. Dzięki
Yudu Ban,
rozwiązało to problem w projekcie ASP.NET MVC 5 z
pakietami
Naprawiłem to dla mnie. Dzięki.
Henry A.
naprawdę denerwujące ... używając aurelia-webpack-skeleton Muszę zaimportować plik bootstrap.css do mojego main.js, ale jeśli importuję 'bootstrap', dostaję to dziwne zachowanie ...
ironicznie
23

FYI: Jeśli masz bootstrap.js, należy nie dodawać bootstrap-dropdown.js.

Nie jestem pewien wyniku działania pliku bootstrap.min.js.

Fahrenheit
źródło
2
Dzięki. Miałem zarówno dropdown.js, jak i bootstrap.js, więc to nie działało. Usunięcie pliku dropdown.js rozwiązało problem.
nyxz
Jesteś najlepszym człowiekiem, poświęciłem na to około 6 godzin, aby dowiedzieć się, gdzie jest problem !!, jeszcze raz dziękuję ..
Adel
1
Dziękuję Panu bardzo! Mam ten sam problem, ale mam bootstrap.jsi bootstrap.min.js.. Kiedy usunąłem to drugie, działa.
1
Dzięki - W moim przypadku, miałem zarówno js/bootstrap.jsjak równieżjs/dropdown.js
Sanjay Manohar
13

Dla swojego stylu musisz dołączyć pliki css bootstrap, zwykle tuż przed </head>elementem

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

Następnie musisz dołączyć pliki js, zaleca się umieszczenie ich na końcu dokumentu, zwykle zanim </body>strony będą ładować się szybciej.

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>
Ôûssàmâ Höûd
źródło
8

Dodaj następujące linie w znacznikach body.

<!-- 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>
Shevon Silva
źródło
Dzięki, zaoszczędziło mi to trochę czasu.
DrewT
7

musisz zaimportować te pliki do <head></head>swojego 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>
Jaskółka oknówka
źródło
1
Nie mam pojęcia, dlaczego lub co robiłem nieprawidłowo, ale ta odpowiedź zrobiła to za mnie. Dzięki Martin!
dghalbr
Dziękuję Ci. Nie wiem też, dlaczego to rozwiązało problem. Menu działało dobrze z /js/jquery.js i /js/bootstrap.min.js, dopóki witryna nie została przeniesiona na inny serwer Windows.
Hong
5

Czy włączyłeś jquery.js?

Porównaj również ten wiersz kodu ze swoim:

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

Zobacz tę wersję, która działa dobrze.

<!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>
Frankline
źródło
4

Należy uwzględnić zarówno bootstrap, jak i 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>

UWAGA: wersja jquery-xxxmin.js musi być wersją 2.xx !!!

David Liao
źródło
4

Rozgryzłem to i najprostszym sposobem, aby to zrobić, jest skopiowanie i pominięcie CDN linku bootstrap, które można znaleźć na https://www.bootstrapcdn.com/ i skryptach Jquery CDN, które można znaleźć tutaj https: // code.jquery.com/ i po skopiowaniu linków, linki bootstrap wklejają się w nagłówku HTML, a skrypt Jquery w treści HTML, jak w przykładzie poniżej:

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

U mnie działa idealnie, mam nadzieję, że zadziała również u Ciebie :)

Atdhe Kurteshi
źródło
Dziękuję Ci ! przenoszę go, zanim </body>tagi sprawią, że zadziała na moim końcu!
Ryan Aquino
2

Spróbuj tego w sekcji głównej

<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">
Hamza Javed
źródło
2

Oto co zrobiłem .....

Właśnie usunąłem plik bootstrap.min.js z mojego projektu i dodałem do niego plik bootstrap.js i zaczął działać ........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));
Mohit Dhawan
źródło
Dodawanie do #kubilay Odpowiedź: możesz mieć jedną klasę o nazwie „A” na dokument. .min.css / .min.js - to ogólnie te same pliki css i js, z których usunięte są wszystkie spacje. Dzięki temu są mniejsze i ładują się szybciej. Przeglądarka i tak nie potrzebuje spacji.
Mohit Dhawan
Usuń jeden, jeśli korzystałeś z obu
Mohit Dhawan
2

Wypróbuj ten kod:

<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>
Nishant Ingle
źródło
1

Będziesz musiał sprawdzić sprzeczne pliki / właściwości css, na przykład możesz mieć niestandardową zawartość stylu „.nav” w innym miejscu spróbować wyłączyć własne pliki css i sprawdzić, czy to działa, a następnie sprawdzić, który plik lub styl niestandardowy powoduje konflikty. dołączasz plik bootstrap.min.js do swojego kodu

Mancy
źródło
1

Miałem podobny problem tylko po to, aby zauważyć, że dwukrotnie dodałem skrypt bootstrap, a drugi skrypt bootstrap był po powyżej skryptu jquery.

Rozwiązanie:

  • Upewnij się, że pliki bootstrap.min.js i jquery.min.js znajdują się w pliku tylko raz.
  • Skrypt bootstrap.min.js powinien znajdować się po pliku jquery.min.js
BK
źródło
1

Kopiuj i wklej poniżej jQuery <script>i arkusz stylów <link>do swojego, <head>aby upewnić się, że ładujesz wszystkie niezbędne pliki.

Ważne jest, aby .jsplik JQuery znajdował się powyżej .cssarkusza stylów

Po prostu wklej następujący wiersz, aby przetestować

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

Problem występuje głównie przy ładowaniu skryptu jQuery, upewnij się, że poprawnie dodajesz odwołania.

Teraz przetestuj

Jeśli jednak to nie zadziała, sprawdź witrynę bootstrap, na której jest przykładowa implementacja.

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

Amir Dora.
źródło
1

Do najnowszej wersji Bootstrap będziesz potrzebować 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>

Skopiuj link w sekcji End of the Body tuż przed <body>tagiem, wewnątrz <Head>tagu.

Sayed Muhammad Idrees
źródło
1

Właśnie dodałem JSczęść bootstrapdo mojej strony indeksu, to zadziałało.

Wklej to, jeśli używasz najnowszej wersji 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
mecdeality
źródło
To pytanie od 8 lat z zaakceptowaną odpowiedzią ...
Zsolt Meszaros,
@ZsoltMeszaros Tak, wiem. Ale są też inni ludzie, którzy mogą zmierzyć się z tym problemem
mecdeality
0

Miałem ten sam problem, który mnie tu sprowadził.

Mój problem: Używałem zalecanej wersji jquery 1.12.0 jako mojego pliku skryptu jquery.

Rozwiązanie: zastąpiono skrypt jquery wersją jquery 2.2.0.

To mnie rozwiązało.

Everest Nwosu
źródło
0

Dla mnie był to problem z CORS. usunąłemcrossorigin="anonymous" z mojego skryptu importowanie tagów i ponownie zaczęło działać.

Przy okazji, najnowsze tagi skryptów, we właściwej kolejności, zawsze można znaleźć tutaj: https://getbootstrap.com/

Edycja: Najwyraźniej dodanie deferdo scripttagu zepsuje również wszystkie gadżety Bootstrap.

Cameron Hudson
źródło
0

Skopiuj / wklej łącze CSS, a następnie łącze JS z witryny bootstrap tutaj . Wtedy lista rozwijana powinna działać.

Moja strona wygląda tak:

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

( Stąd pasek nawigacyjny )

Pro Q
źródło
0

Sprawdź bibliotekę popper.js, ponieważ miałem ten sam problem, możesz znaleźć CDN bootstrap, jquery i popper do rozwijania na https://getbootstrap.com/ lub po prostu skopiuj następujące tagi skryptów

necheervan abdullah
źródło
0

Mój (ten sam) problem pojawił się, gdy pomyliłem wersję css i bootstrap. Używałem wersji 3 bootstrap.min.js z wersją 4.5 bootstrap.min.css

Jeśli ostatnio załadowałeś lub nadpisałeś kilka plików css i js w folderze statycznym, byłoby to dobre miejsce na rozpoczęcie.

Powodzenia.

PowerAktar
źródło
-1

Miałem konfigurację z Angular 7, jQuery 3.4.1, Popper 1.12.9 i Bootstrap 4.3.1, nic mi nie działało, więc zrobiłem ten mały hack w stylach:

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

Html wygląda tak:

<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
źródło