Il menu a discesa Bootstrap non funziona


100

Ho problemi a far funzionare i miei menu a discesa. Posso far apparire perfettamente la barra di navigazione, ma quando clicco su "Dropdown" (uno di loro) non viene visualizzato il menu a discesa. Ho provato a cercare altri post su questo, ma niente che ha risolto i problemi di tutti ha aiutato. Ho copiato il sorgente direttamente dal sito Web di bootstrap, ma non riesco a farlo funzionare sulla mia macchina. Qualcuno ha qualche idea? Lo sto fissando da un'ora e non riesco a capire quale sia il problema.

<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
Scusa, al lavoro quando ho scritto questo. Ho modificato la spiegazione.
user2540528

Puoi darci il link? @ user2540528
STP38

Il collegamento al file JS?
user2540528

1
Ho appena copiato il tuo codice e aggiunto js / css e funziona sulla mia macchina
Chris

"Ho copiato la fonte direttamente dal sito Web di bootstrap" @ user2540528, puoi darmi quel link?
STP38

Risposte:


142

Forse prova con

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

e vedere se funzionerà.


Questo lo ha fatto. Qualche motivo per cui i file locali non funzionerebbero? E queste fonti js se lo distribuisco su un dominio corretto? Voglio solo assicurarmi che la mia app funzioni ancora dopo averla completata e pubblicata. (È il mio primo, quindi è per questo che lo chiedo)
user2540528

@ user2540528 Probabilmente il file ha un nome diverso jquery-1.11.0.jso non è affatto lì.
Chris

user2540528 Sembra che ti manchi bootstrap.css
Avec

1
Il mio problema era che avevo bootstrap.css nel posto giusto ma non avevo bootstrap.min.js incluso nel mio bundle
codingNightmares

Mi sono reso conto che anche l'ordine di quelle righe di codice è importante. Se metti le API di Google come ultima riga di codice, allora non funziona.
Efe Büyük

114

Avevo un progetto bootstrap + rails e il menu a discesa funzionava bene. Hanno smesso di funzionare dopo un aggiornamento ...

Questa è la soluzione che ha risolto il problema, aggiungi quanto segue al file .js:

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

Risolto un problema che avevo con Bootstrap 3 e Rails 4.2 in cui il menu a discesa funzionava solo la prima volta, ma non al secondo clic.
bovender

Progetto Grails con Spud CMS - Questo ha risolto il mio problema di attivazione / disattivazione del menu a discesa.
Tyler Rafferty

grazie mille per questo 1. tutti dicono "aggiungi il jquery prima del bootstrap". ma era così. Questa è l'unica risposta, dopo più di un'ora di ricerca, ha funzionato!
MANUTENZIONE

1
Questo mi ha aiutato immensamente. Qualche idea sul perché è necessaria questa correzione?
Brack

1
Questa soluzione ha funzionato per me. Si è scoperto che avevo importato bootstrap sul mio sito due volte, dopo averlo importato solo una volta, ha iniziato a funzionare senza la correzione in questa soluzione.
harshpatel991

27

Soluzione di lavoro al 100%

basta posizionare il tuo collegamento Jquery prima di tutti i collegamenti js e css

Esempio corretto

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

Esempio sbagliato!

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

Non ha funzionato nel mio caso. Ho dovuto usare la soluzione di Iwan B.
Toddmo

1
@Nabin Funziona perché, dobbiamo caricare prima jquery e poi bootstrap, poiché bootstrap usa jquery
Siddaram H

@toddmo Funziona, basta controllare jquery, bootstrap e css caricati correttamente o meno dalla scheda networy in google crome dbugger
LMK

12

Metti il ​​collegamento jquery js prima del collegamento js bootstrap in questo modo:

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

invece di:

<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
Le tue parole sono corrette ma i blocchi di codice sono l'opposto di quello che dici.
Astra Bear

4

Secondo getBootstrap.com, i menu a discesa sono costruiti sulla libreria di terze parti Popper.js. Quindi, se il menu a discesa non funziona su clic ma funziona solo al passaggio del mouse del menu a discesa, includi popper.js, bootstrap.js e bootstrap.css. Non includere popper.js prima di includere i bundle bootstrap potrebbe essere uno dei motivi.

<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
Per la versione 4 questa è la risposta che è un grande cambiamento quando siamo abituati a includere solo Jquery e bootstrap nei nostri progetti.
Vindic

1
Sì, l'ordine è davvero importante.
nikhilmeth

Questo è quello che ha funzionato per me. Ho copiato gli stessi codici dalla pagina Bootstrap, ma questo è l'ordine giusto in cui dovrebbero essere.
DuckRodgers,

3

L'ho affrontato mentre stavo usando ASP .NET Forms. La soluzione che ho utilizzato è stata l'eliminazione o l'inserimento di commenti nei riferimenti jQuery e Bootstrap dalla <asp:ScriptManager runat="server">pagina master. Sembra che crei un conflitto con i riferimenti jQuery e Bootstrap che hai inserito nel file <header>.


2

Nel caso in cui qualcuno continui ad affrontare lo stesso problema, assicurati di controllare l' origine della pagina di visualizzazione nel browser per verificare se tutti i file jquery e bootstrap sono caricati e i percorsi del file sono corretti. Più importante! assicurati di utilizzare il file jquery stabile più recente.


2

Forse qualcuno là fuori può trarne vantaggio:

Riepilogo (aka tl; dr)

I menu a discesa Bootstrap hanno smesso di cadere a causa dell'aggiornamento dalla django-bootstrap3versione 6.2.2a 11.0.0.

sfondo

Abbiamo riscontrato un problema simile in un djangosito legacy che fa molto affidamento su bootstrapthrough django-bootstrap3. Il sito ha sempre funzionato bene e ha continuato a farlo durante la produzione, ma non sul nostro sistema di test locale. Non c'erano evidenti modifiche correlate nel codice, quindi era molto probabile un problema di dipendenza.

Sintomi

Quando si visita il sito sul server di test django locale , a prima vista sembrava perfettamente a posto: stile / layout utilizzando bootstrapcome previsto, inclusa la barra di navigazione. Tuttavia, tutti i menu a discesa non sono stati visualizzati.

Nessun errore nella console del browser. Tutti i file statici jse statici csssono stati caricati correttamente e le funzionalità di altri pacchetti su cui si basavano jqueryfunzionavano come previsto.

Soluzione

Si è scoperto che il django-bootstrap3pacchetto nel nostro ambiente Python locale era stato aggiornato all'ultima versione 11.0.0, mentre il sito è stato creato utilizzando 6.2.2.

Tornando indietro per django-bootstrap3==6.2.2risolvere il problema per noi, anche se non ho idea di cosa lo abbia causato esattamente.


1

Sto usando rails 4.0 e ho riscontrato lo stesso problema

Ecco la mia soluzione che ha superato il test

aggiungi a Gemfile

gem 'bootstrap-sass'

correre

bundle install

quindi aggiungi ad app / assets / javascripts / application.js

//= require bootstrap

Quindi il menu a discesa dovrebbe funzionare

A proposito, la soluzione di Chris funziona anche per me.

Ma penso che sia meno conforme all'idea della pipeline di asset


0

Sembra che ci sia ancora molto da fare per Rails 4.

  1. Dentro di te aggiungi Gemfile.

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

come visto qui

  1. Quindi devi correre

    $ bundle install

Questa è la parte che nessuno ha menzionato

Apri il tuo file config / application.rb

  1. aggiungilo subito prima della penultima estremità

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

come visto qui circa un 20% in fondo alla pagina.

  1. Quindi creare un file custom.css.scss in questa directory

    app / attività / fogli di stile

come visto qui un po 'più in basso rispetto al compito precedente

  1. All'interno di quel file includi

    @import "bootstrap";


Ora ferma il tuo server e riavvia e tutto dovrebbe funzionare bene.

Ho provato a eseguire bootstrap senza usare una gemma ma non ha funzionato per me.

Spero che aiuti qualcuno!


0

Penso che sia la questione del percorso del tuo file di percorso. Non il bootstrap né il file JQuery.


0

Nel mio caso, la disabilitazione delle estensioni di Chrome lo ha risolto. Li ho rimossi da Chrome uno per uno finché non ho trovato il colpevole.

Dato che sono l'autore dell'estensione offensiva di Chrome, immagino che sia meglio aggiustare l'estensione!


0

La mia versione bootstrap puntava a 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>

cambiato in 4-beta

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

e ha iniziato a funzionare


0

il problema è che href è href = "#" devi rimuovere href = "#" in tutti i tag


0

Per Bootstrap 4 è necessaria una libreria aggiuntiva. Se leggi la console del browser, Bootstrap stamperà effettivamente un messaggio di errore che ti informa che ne hai bisogno affinché il menu a discesa funzioni.

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

0

nei progetti angolari aggiungiamo linee di tesi angular-cli.json o angular.json:

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

  ],

0

Ho provato tutte le risposte sopra e l'unica versione che funziona per me è jquery 1.11.1 . Ho provato con tutte le altre versioni 1.3.2, 1.4.4, 1.8.2, 3.3.1 e il menu a discesa della barra di navigazione non funziona.

<script src="jquery/jquery-1.11.1.min.js"></script>

0

Se affronti il ​​problema in Ruby on Rails , la soluzione esauriente è fornita dal file readme di Bootstrap Ruby Gem .

o in breve:

  1. rinominare application.cssinapplication.scss
  2. Inserisci @import "bootstrap";
  3. aggiungere gem 'jquery-rails'a Gemfilemeno che non esista.
  4. aggiungi //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets a application.js.
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.