Menu déroulant avec Twitter Bootstrap

StackOverflow https://stackoverflow.com/questions/9333940

Question

Suite à cette question , je suis encore aux prises avec le Twitter Bootstrap. J'ai réussi à obtenir ma barre de navigation pour apparaître et je suis en train d'ajouter un menu déroulant de descendre. Peu importe ce que j'essaie, je ne peux pas réellement obtenir le menu déroulant partie du menu au travail! Voici une capture d'écran de mon menu.

Barre de navigation

Comme vous pouvez le voir, je « Paramètres du compte », qui devrait être un menu déroulant, mais quand je clique dessus, aucune liste déroulante des options apparaissent. Voici mon code: 

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

Comme vous pouvez le voir, je fais référence dans le menu déroulant fichier Javascript de Twitter. J'ai aussi essayé faisant référence à cette place qui ne fait aucune différence. J'ai aussi inclus le Javascript que je crois devrait branchement dans le menu déroulant et appel dans le fichier Javascript Twitter.

Je suis à une perte pour expliquer pourquoi cela ne fonctionne pas

Était-ce utile?

La solution

Je ne vois pas où vous incluez jQuery dans votre code. Vous devez inclure avant tous vos autres scripts pour le menu déroulant au travail.

Voici le script jQuery du CDN google: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Autres conseils

l'esprit, il est également inutile d'utiliser ce code dans votre exemple: 

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

Parce qu'il ne fait rien.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top