Twitter Bootstrap Dropdown funktioniert nicht in der Django -Vorlage

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

Frage

Vielen Dank, dass Sie versucht haben, im Voraus zu helfen!

Mein Problem ist, dass Twitter Bootstraps Dropdown -Menü (für Navbar) für mich nicht funktioniert und ich jetzt sehr verloren bin. Mein Header -Code (also ja, ich füge ihre .js ein und nenne ihn):

<head>
  <title>{% block title %}User test{% endblock %}</title>
  <!--for IE6-8 support of HTML elements -->
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script><!--dropdown addon-->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><!--jquery-->
  <script type="text/javascript">
        $(document).ready(function(){
        $('.dropdown-toggle').dropdown();
    });
   </script>

   <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}style.css" /><!--link to my style.css-->
   <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /><!--link to bootstrap's css-->

Der Menüelement, der angenommen wird, dass sie Dropdowns haben:

     <ul class="nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        {% trans "Logged in" %}: {{ user.username }} 
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="{% url auth_password_change %}">{% trans "Change password" %}</a></li>
                        <li><a href="{% url auth_logout %}">{% trans "Log out" %}</a></li>
                    </ul>
                </li>
                <li><a href="/upload/">{{ "Upload your CVS" }}</a></li>
                <li><a href="/settings/">{% trans "Settings" %}</a></li>
      </ul>

Danke noch einmal,

Blargie-Bla

War es hilfreich?

Lösung

Wechseln Sie die Reihenfolge Ihres JS -Einschlusses, damit JQuery zuerst geladen wird.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><!--jquery-->
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script><!--dropdown addon-->

Andere Tipps

Sie müssen die letzte Version von JQuery (1.7) verwenden

Wie John sagte, ich musste in der Tat die Linien ändern. Aus irgendeinem magischen Grund (weiß es immer noch nicht warum!) Brach es an den Haltepunkten, die nicht einmal gesetzt waren, und daher wurde JQuery nicht geladen. Nach dem Neustart des Browsers hat es funktioniert.

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