Dropdown-Menü mit Twitter Bootstrap

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

Frage

Nach dieser Frage bin ich immer nochProbleme mit dem Twitter Bootstrap.Ich habe es geschafft, dass meine Navigationsleiste angezeigt wird, und ich versuche, ein Dropdown-Menü hinzuzufügen.Egal was ich versuche, ich kann den Dropdown-Teil des Menüs nicht zum Laufen bringen!Hier ist ein Screenshot meines Menüs.

Navigationsleiste

Wie Sie sehen können, habe ich "Kontoeinstellungen", die ein Dropdown-Menü sein sollten, aber wenn ich darauf klicke, werden keine Dropdown-Optionen angezeigt.Unten ist mein 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>

Wie Sie sehen können, verweise ich auf die Dropdown-Javascript-Datei von Twitter.Ich habe auch versucht, dies lokal zu referenzieren, was keinen Unterschied machte.Ich habe auch das Javascript eingefügt, von dem ich glaube, dass es das Dropdown-Menü anschließen und die Javascript-Datei von Twitter aufrufen sollte.

Ich weiß nicht, warum das nicht funktioniert

War es hilfreich?

Lösung

Ich kann nicht sehen, wo Sie jQuery in Ihren Code aufnehmen.Sie müssen es vor allen anderen Skripten einfügen, damit die Dropdown-Liste funktioniert.

Hier ist das jQuery-Skript aus dem Google CDN: 

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

Andere Tipps

Beachten Sie, dass es auch überflüssig ist, diesen Code in Ihrem Beispiel zu verwenden: 

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

Weil es nichts tut.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top