Il menu a discesa Bootstrap non funziona (non si abbassa quando si fa clic)

Sto provando a fare i conti con il bootstrap e con scarso successo. Sto solo cercando di ottenere una versione locale di questo modello di lavoroIl menu a discesa Bootstrap non funziona (non si abbassa quando si fa clic)

http://getbootstrap.com/examples/jumbotron/

ho copiato il codice HTML direttamente in una pagina HTML e fatto riferimento il file CSS e JS nello stesso ordine come la pagina web utilizzando solo copie da l'ultimo download sulla mia macchina. Tuttavia non accade nulla quando si fa clic sulla freccia accanto al menu a discesa (ovvero non appare alcun menu)

Ho provato a riprodurre il codice in un jsfiddle ma questo è ancora peggio e non visualizza il menu correttamente. http://jsfiddle.net/andieje/kRX6n/

Ecco l'output della mia pagina. Ho anche incluso il menu a discesa js troppo

<!DOCTYPE html> 
<html> 
<head><title> 
    Untitled Page 
</title><link href="styles/bootstrap.css" rel="stylesheet" /> 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="JavaScript/html5shiv.js"></script> 
     <script src="JavaScript/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form navbar-right"> 
      <div class="form-group"> 
       <input type="text" placeholder="Email" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <input type="password" placeholder="Password" class="form-control"> 
      </div> 
      <button type="submit" class="btn btn-success">Sign in</button> 
      </form> 
     </div><!--/.navbar-collapse --> 
     </div> 
    </div> 



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

<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" /> 

</body> 
</html>

Ho anche provato ad aggiungere questo codice, ma senza alcun risultato

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

fonte

2013-08-20 user2274191

Sei sicuro che il file 'bootstrap.min.js' non utilizza un periodo e non un trattino? Sto guardando la fonte in questo momento e sta usando un punto. – Kristian

ciao - il mio file è denominato con un trattino e non un punto. grazie – user2274191

è sufficiente rimuovere la type="text/javascript"

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

Ecco l'aggiornamento - http://jsfiddle.net/andieje/kRX6n/

fonte

2013-08-21 07:12:22

Grazie per la tua risposta. Stavo affrontando lo stesso problema e la tua soluzione ha funzionato. Ma puoi spiegare qual è il problema di hainv 'text/javascript'? – user2243747

Questa è una bizzarra soluzione a un bizzarro problema (ma ha funzionato!) – contactmatt

ha funzionato anche per me! Ma sembra strano haha – erginduran

ho affrontato lo stesso problema, la soluzione ha funzionato per me, spero che funzionerà per anche tu.

<script src="content/js/jquery.min.js"></script> 
<script src="content/js/bootstrap.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.dropdown-toggle').dropdown(); 
    }); 
</script>

Si prega di includere il file "jquery.min.js" prima file "bootstrap.min.js", se si rimescola l'ordine non funzionerà.

fonte

2014-04-03 14:30:33 ashishSober

Aggiunta $ ('. Dropdown-toggle'). Dropdown(); risolto il mio problema grazie. – Murat

L'ordine sembra pertinente. Flask-Bootstrap with ha un bootstrap/base.html di modello Jinja2 che ha esattamente questo ordine. Nel mio caso non me ne sono reso conto e ho incluso di nuovo gli script in un sotto-modello. Questo ha rotto il dropdown apparentemente a causa del problema di ordine descritto da ashishSober. – bvanlew

Problema risolto aggiungendo $ ('. Dropdown-toggle'). Dropdown(); Grazie –

Basta aggiungere entrambi questi file dopo aver aperto il tag del corpo. Tieni presente che "Solo dopo il tag Body" è presente qualsiasi tag after body. Se aggiungi i file sotto elencati all'interno del tag body, i tuoi problemi non saranno risolti.

Quindi incollarli prima o prima della chiusura del tag del corpo ... Questo funziona al 100%. Ho provato e ho funzionato!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>

fonte

2015-03-19 18:52:26

-2

Ho avuto lo stesso problema Ho rimosso il seguente script e ha funzionato per me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

fonte

2016-06-24 22:20:12

L'aggiunta di questo script al mio codice ha risolto il menu a discesa.

<script> $(document).ready(function() { $('.dropdown-toggle').dropdown(); }); </script>

fonte

2016-08-29 22:54:42

Il menu a discesa Bootstrap non funziona (non si abbassa quando si fa clic)

risposta

Problemi correlati