Menu a discesa con Twitter Bootstrap

Dopo questa domanda, io sono ancora alle prese con Twitter Bootstrap. Sono riuscito a ottenere la mia barra di navigazione e sto cercando di aggiungere un menu a discesa per esso. Non importa quello che cerco, io in realtà non può ottenere la discesa parte del menu per il lavoro! Ecco uno screenshot del mio menu.

Menu a discesa con Twitter Bootstrap

Come si può vedere, ho “Impostazioni Account”, che dovrebbe essere un menu a discesa, ma quando clicco su di esso, non a discesa opzioni visualizzate. Di seguito è 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 si può vedere, io sono di riferimento a discesa file Javascript da Twitter. Ho provato anche in riferimento a questo locale che ha fatto alcuna differenza. Ho incluso anche il codice Javascript che, credo, dovrebbe agganciare il menu a discesa e chiamata in Twitter file Javascript.

Io sono in perdita per spiegare perché questo non funziona



2 Replies
  1. 12

    Non riesco a vedere dove sono compresi jQuery nel codice. È necessario includere prima di tutti gli altri script per l’elenco a discesa al lavoro.

    Qui è lo script jQuery da google CDN:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    • Meraviglioso!!! Che ha funzionato a meraviglia. Ho fatto originariamente 1,5 jQuery script incluso, ma sembra che la versione 1.7 è ciò che è necessario. Ho cambiato anche l’ordine nel mio header – sono ora inclusi il file CSS e poi gli script, perché il contrario causato il mio navbar per dividere su 2 linee. Grazie per il vostro aiuto.
  2. 5

    Mente è anche ridondante di utilizzare questo codice nel tuo esempio:

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

    Perché non fa niente.

Lascia un commento