Das Dropdown-Menü Twitter Bootstrap 2 funktioniert nicht

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

  •  27-10-2019
  •  | 
  •  

Frage

Guten Tag! Ich versuche, ein Dropdown-Menü aus Beispielen auf meiner Website zu implementieren.Aber es funktioniert nicht (Dropdown-Menü wird überhaupt nicht angezeigt).Ich habe alle erforderlichen JS- und CSS-Dateien eingefügt. Das Markup ist das gleiche wie in den Dokumenten.

Kannst du sehen, was ich falsch mache? 

<link type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">

<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script>

...

<body>
<div class="navbar .navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">
                Brand
            </a>

            <ul class="nav">
                <li class="dropdown">
                    <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
                        Аккаунт
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" id="fat-menu">
                        <li><a>SubLink</a></li>
                        <li class="divider"></li>
                        <li><a>SubLink</a></li>
                    </ul>
                </li>
            </ul>

...


        </div>
    </div>
</div>

Vielen Dank.

War es hilfreich?

Lösung

Das Problem bestand darin, dass der js-Block in der HTML-Datei fehlte, der für eine bestimmte Funktion erforderlich war.

Das fehlende Codebit war: 

$('.dropdown-toggle').dropdown()

Andere Tipps

Sie binden Ihren Hauptnavigationslink nicht richtig an Ihre Dropdown-Liste. Versuchen Sie Folgendes: 

<ul class="nav">
    <li class="dropdown" id="fat-menu"> /* notice the reference to your dropdown link #fat-menu */
        <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
            Аккаунт
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a>SubLink</a></li>
            <li class="divider"></li>
            <li><a>SubLink</a></li>
        </ul>
    </li>
</ul>

Demo: http://jsfiddle.net/u5vhS/1/

Normalerweise habe ich eines davon vergessen:

  • richtige HTML
  • Verknüpfung mit jquery.js und bootstrap-dropdown.js
  • Überprüfen, ob ich es richtig verlinkt habe (es scheint überflüssig, aber es hat mir sicherlich geholfen)
  • Aufruf der Dropdown-Liste: $ ('. dropdown-toggle'). dropdown ()

Ich weiß, dass dies albern erscheinen mag, aber wenn Sie die Quelle anzeigen (per Rechtsklick), sind die Adressen der JavaScript-Dateien korrekt?Möglicherweise ist {{STATIC_URL}} nicht korrekt.Versuchen Sie, die Adressen aus der Quelle zu kopieren und in die Adressleiste einzufügen.Stellen Sie sicher, dass Sie den Inhalt der JavaScript-Dateien tatsächlich sehen.

Ich hatte das gleiche Problem.Das Kommentieren des Links für bootstrap-dropdown.js hat das Problem behoben.Ich brauchte nur bootstrap.min.js

Das passiert, wenn Sie li irgendwo in Ihrem CSS überschreiben.Wenn Sie beispielsweise ein anderes Stylesheet mit Inhalt haben: 

li {
    list-style: none;
    margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 25px;
    position: relative;
}

Es wird nicht funktionieren.Stellen Sie sicher, dass kein Konflikt vorliegt.

Versuchen Sie, Ihre jQuery-Bibliothek zu aktualisieren. Dies hat das gleiche Problem für mich gelöst.

Hatte das gleiche Problem in einem .net-Projekt (Dropdown-Menü wird überhaupt nicht angezeigt), jedoch funktionierten offizielle Bootstrap-Beispiele einwandfrei.Das Aktualisieren der jQuery-Bibliothek in meinem Projekt von 1.6.1 auf 1.8.2 hat das Problem behoben.

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