Menu a discesa con Twitter Bootstrap
-
27-10-2019 - |
Domanda
Seguendo questa domanda , sono ancoraalle prese con Twitter Bootstrap.Sono riuscito a far apparire la mia barra di navigazione e sto cercando di aggiungere un menu a discesa ad essa.Non importa cosa provo, non riesco a far funzionare la parte a discesa del menu!Ecco uno screenshot del mio menu.
Come puoi vedere, ho "Impostazioni account" che dovrebbe essere un menu a discesa, ma quando ci clicco sopra, non viene visualizzata alcuna opzione a discesa.Di seguito è riportato il mio codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<link href="@Url.Content("~/Content/bootstrap.min.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="#">Present Ideas</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
@RenderBody()
</div>
</body>
</html>
Come puoi vedere, sto facendo riferimento al file Javascript a discesa da Twitter.Ho anche provato a fare riferimento a questo localmente, il che non ha fatto differenza.Ho anche incluso il Javascript che credo debba collegare il menu a tendina e richiamare il file Javascript di Twitter.
Non riesco a capire perché non funziona
Soluzione
Non riesco a vedere dove stai includendo jQuery nel tuo codice.Devi includerlo prima di tutti gli altri script affinché il menu a discesa funzioni.
Ecco lo script jQuery dal CDN di Google:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Altri suggerimenti
Tieni presente che è ridondante anche utilizzare questo codice nel tuo esempio:
<script type="text/javascript" language="javascript" >
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Perché non sta facendo nulla.