El menú desplegable de Bootstrap de Twitter no funciona en la plantilla de Django

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

Pregunta

¡Gracias por tratar de ayudar de antemano!

Mi problema es que el menú desplegable de Twitter Bootstrap (para Navbar) no funciona para mí y ahora estoy muy perdido. Mi código de encabezado (así que sí, incluyo su .js y lo llamo):

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

El elemento de menú que se supone que tiene desplegable:

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

Gracias de nuevo,

blargie-bla

¿Fue útil?

Solución

Cambie el pedido de su JS incluye para que jQuery se cargue primero.

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

Otros consejos

Debe usar la última versión de jQuery (1.7)

Como John dijo, de hecho necesitaba cambiar las líneas. Por alguna razón mágica (¡todavía no sé por qué!) Estaba rompiendo en los puntos de descanso que ni siquiera estaban establecidos y, por lo tanto, JQuery no se cargaba. Después de reiniciar el navegador, funcionó.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top