Menu rozwijane Bootstrap nie działa

101

Mam problem z uruchomieniem moich list rozwijanych. Mogę sprawić, by pasek nawigacyjny był wyświetlany idealnie, ale po kliknięciu opcji „Lista rozwijana” (którekolwiek z nich) nie wyświetla menu rozwijanego. Próbowałem przejrzeć inne posty na ten temat, ale nic, co rozwiązało problemy wszystkich, nie pomogło. Skopiowałem źródło bezpośrednio ze strony bootstrap, ale nie mogę go uruchomić na moim komputerze. Czy ktoś ma jakieś pomysły? Gapię się na to od godziny i nie mogę zrozumieć, w czym jest problem.

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

javascript jquery html css twitter-bootstrap user2540528
źródło
1
Przepraszam, w pracy, kiedy to napisałem. Zredagowałem wyjaśnienie.
user2540528
Czy możesz podać nam link? @ user2540528
STP38
Link do pliku JS?
user2540528
1
Właśnie skopiowałem twój kod i dodałem js / css i działa na moim komputerze
Chris
„Skopiowałem źródło prosto ze strony bootstrap” @ user2540528, Czy możesz mi podać ten link?
STP38

Odpowiedzi:

142

Może spróbuj 

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

i zobacz, czy zadziała.

Chris
źródło
Zrobiło to. Czy jest jakiś powód, dla którego lokalne pliki nie będą działać? A te źródła js, jeśli wdrożę to w domenie, prawda? Chcę się tylko upewnić, że moja aplikacja nadal działa po jej ukończeniu i opublikowaniu. (To mój pierwszy, dlatego pytam)
user2540528
@ user2540528 Prawdopodobnie plik ma wtedy inną nazwę jquery-1.11.0.jslub w ogóle go nie ma.
Chris
user2540528 Wydawało się, że przegapiłeś plik bootstrap.css
Avec
1
Mój problem polegał na tym, że miałem
plik
Zdałem sobie sprawę, że kolejność tych linii kodu jest również ważna. Jeśli umieścisz Google API jako ostatnią linię kodu, to nie zadziała.
Efe Büyük
114

Miałem projekt bootstrap + rails, a lista rozwijana działała dobrze. Przestali działać po aktualizacji ...

To jest rozwiązanie, które rozwiązało problem, dodaj następujący plik do pliku .js:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});
Iwan B.
źródło
Rozwiązano problem z Bootstrap 3 i Rails 4.2, gdzie menu rozwijane działało tylko za pierwszym razem, ale nie przy drugim kliknięciu.
bovender
Projekt Grails w / Spud CMS - to rozwiązało mój problem z przełączaniem listy rozwijanej.
Tyler Rafferty,
Dziękuję bardzo za to 1. wszyscy mówią „dodaj jquery przed bootstrapem”. ale tak było. To tylko oni odpowiadają, po ponad godzinie patrzenia, że ​​zadziałało!
MaNTiS
1
To bardzo mi pomogło. Masz jakiś pomysł, dlaczego ta poprawka jest potrzebna?
Brack
1
To rozwiązanie zadziałało dla mnie. Okazało się, że dwukrotnie zaimportowałem bootstrap na swoją stronę, po tym, jak zaimportowałem go tylko raz, zaczął działać bez poprawki w tym rozwiązaniu.
harshpatel991
27

W 100% działające rozwiązanie

po prostu umieść swój link Jquery na pierwszym miejscu wszystkich linków js i css

Przykład poprawnie 

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

Przykład Źle!

<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
Hidayat ullah
źródło
Nie zadziałało w moim przypadku. Musiałem użyć rozwiązania Iwana B.
toddmo
1
@Nabin To działa, ponieważ musimy najpierw załadować jquery, a następnie bootstrap, ponieważ bootstrap używa jquery
Siddaram H
@toddmo Działa, po prostu sprawdź jQuery, bootstrap i css załadowane poprawnie lub nie z zakładki networy w Google Crome dbugger
LMK
12

Umieść link jquery js przed linkiem bootstrap js w następujący sposób:

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

zamiast:

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
Seyibabs
źródło
Put the jquery css ...>Put the jquery js ...
allcaps
2
Twoje słowa są poprawne, ale bloki kodu są przeciwieństwem tego, co mówisz.
Astra Bear
4

Według getBootstrap.com listy rozwijane są tworzone na podstawie biblioteki Popper.js innej firmy. Tak więc, jeśli menu rozwijane nie działa po kliknięciu, ale działa tylko po najechaniu kursorem na listę rozwijaną, to popper.js, bootstrap.js i bootstrap.css. Pominięcie popper.js przed dołączeniem pakietów bootstrap może być jednym z powodów.

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

nikhilmeth
źródło
1
W przypadku wersji 4 jest to odpowiedź, która jest dużą zmianą, gdy jesteśmy przyzwyczajeni do włączania tylko Jquery i bootstrap do naszych projektów.
Vindic
1
Tak, kolejność naprawdę ma znaczenie.
nikhilmeth
To jest ten, który pracował dla mnie. Skopiowałem te same kody ze strony Bootstrap, ale we właściwej kolejności powinny być.
DuckRodgers
3

Miałem do czynienia z tym, gdy korzystałem z formularzy ASP .NET. Rozwiązaniem, którego użyłem, było usunięcie lub zakomentowanie odwołań do jQuery i Bootstrap ze <asp:ScriptManager runat="server">strony wzorcowej. Wygląda na to, że tworzy konflikt z odniesieniami jQuery i Bootstrap, które umieściłeś w pliku <header>.

Mohammad AlShaabi
źródło
2

W przypadku, gdy ktoś nadal napotyka ten sam problem, sprawdź źródło strony widoku w przeglądarce, aby sprawdzić, czy wszystkie pliki jquery i bootstrap są załadowane, a ścieżki do pliku są poprawne. Najważniejszy! upewnij się, że używasz najnowszego stabilnego pliku jquery.

Munam Yousuf
źródło
2

Może ktoś może na tym skorzystać:

Podsumowanie (aka tl; dr)

Lista rozwijana Bootstrap przestała spadać z powodu aktualizacji z django-bootstrap3wersji 6.2.2do 11.0.0.

tło

Napotkaliśmy podobny problem w starszej djangowitrynie, która w dużym stopniu opiera się na usłudze „ bootstrapthrough” django-bootstrap3. Witryna zawsze działała dobrze i nadal działała w środowisku produkcyjnym, ale nie w naszym lokalnym systemie testowym. W kodzie nie było żadnych oczywistych powiązanych zmian, więc najprawdopodobniej wystąpił problem z zależnościami.

Objawy

Odwiedzając witrynę na lokalnym serwerze testowym django , na pierwszy rzut oka wyglądało to idealnie: styl / układ przy użyciubootstrap zgodnie z oczekiwaniami, w tym paska nawigacyjnego. Jednak nie udało się rozwinąć wszystkich menu rozwijanych.

Brak błędów w konsoli przeglądarki. Wszystkie pliki statyczne jsi csspliki zostały pomyślnie załadowane, a funkcje z innych pakietów, na których się opieram, jquerydziałały zgodnie z oczekiwaniami.

Rozwiązanie

Okazało się, że django-bootstrap3pakiet w naszym lokalnym środowisku Pythona został zaktualizowany do najnowszej wersji 11.0.0, natomiast strona została zbudowana przy użyciu 6.2.2.

Cofam się do django-bootstrap3==6.2.2rozwiązania problemu za nas, chociaż nie mam pojęcia, co dokładnie go spowodowało.

djvg
źródło
1

Używam rails 4.0 i napotkałem ten sam problem

Oto moje rozwiązanie, które przeszło test

dodaj do Gemfile

gem 'bootstrap-sass'

biegać

bundle install

następnie dodaj do app / asset / javascripts / application.js

//= require bootstrap

Wtedy lista rozwijana powinna działać

Nawiasem mówiąc, rozwiązanie Chrisa również działa dla mnie.

Ale myślę, że jest to mniej zgodne z ideą rurociągu aktywów

user1143669
źródło
0

Wygląda na to, że dla Rails 4 jest jeszcze więcej do zrobienia.

  1. Wewnątrz dodaj Gemfile.

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

jak widać tutaj

  1. Następnie musisz biec

    Instalacja pakietu $

To jest ta część, o której nikt nie wspomniał

Otwórz plik config / application.rb

  1. dodaj to tuż przed przedostatnim końcem

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

jak widać tutaj około 20% w dół strony.

  1. Następnie utwórz plik custom.css.scss w tym katalogu

    app / asset / stylesheets

jak widać tutaj nieco dalej od powyższego zadania

  1. Wewnątrz tego pliku uwzględnij

    @import "bootstrap";

Teraz zatrzymaj serwer i uruchom ponownie, a wszystko powinno działać dobrze.

Próbowałem uruchomić bootstrap bez użycia klejnotu, ale to nie zadziałało.

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

Wes Duff
źródło
0

Myślę, że to kwestia trasy w pliku trasy. Nie bootstrap ani plik JQuery.

Alvian Casablancas
źródło
0

W moim przypadku wyłączenie rozszerzeń Chrome naprawiło to. Usunąłem je z Chrome jeden po drugim, aż znalazłem winowajcę.

Ponieważ jestem autorem obraźliwego rozszerzenia Chrome, chyba lepiej naprawię to rozszerzenie!

toddmo
źródło
0

Moja wersja bootstrap wskazywała na 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>

zmieniono na 4-beta

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

i zaczęło działać

Siddaram H.
źródło
0

problem polega na tym, że href to href = "#", musisz usunąć href = "#" ze wszystkich tagów

Victor Jimenez
źródło
0

W przypadku Bootstrap 4 potrzebujesz dodatkowej biblioteki. Jeśli czytasz konsolę przeglądarki, Bootstrap faktycznie wydrukuje komunikat o błędzie informujący, że potrzebujesz go do rozwijania się do pracy.

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
luskbo
źródło
0

w projektach angular dodajemy te linie angular-cli.json lub angular.json:

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

  ],
ATEF CHAREF
źródło
0

Wypróbowałem wszystkie powyższe odpowiedzi i jedyną wersją, która działa dla mnie jest jQuery 1.11.1 . Próbowałem ze wszystkimi innymi wersjami 1.3.2, 1.4.4, 1.8.2, 3.3.1, a menu rozwijane paska nawigacyjnego nie działa.

<script src="jquery/jquery-1.11.1.min.js"></script>
Zeke
źródło
0

Jeśli napotkasz problem w Ruby on Rails , wyczerpującym rozwiązaniem jest plik readme Bootstrap Ruby Gem .

lub w skrócie:

  1. zmień nazwę application.cssnaapplication.scss
  2. Dodaj @import "bootstrap";
  3. dodaj gem 'jquery-rails'do, Gemfilechyba że istnieje.
  4. dodać //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets do application.js.
Esmaeil MIRZAEE
źródło