twitter bootstrap menu déroulant ne fonctionne pas dans django modèle

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

Question

Merci pour essayer d'aider à l'avance!

Mon problème est que le menu du bootstrap twitter menu déroulant (pour barre de navigation) ne fonctionne pas pour moi et je suis très perdu maintenant. Mon code d'en-tête (donc oui, je ne comprends leurs .js et l'appeler): 

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

L'élément de menu qui est censé avoir la liste déroulante: 

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

Merci encore,

blargie-Bla

Était-ce utile?

La solution

Changer l'ordre de votre js .Inclut jQuery est chargé en premier. 

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

Autres conseils

vous devez utiliser la dernière version de jquery (1.7)

Comme Jean dit je en effet nécessaire pour changer les lignes. Pour une raison magique (ne sais toujours pas pourquoi!), Il brisait les points d'arrêt qui ne sont pas encore définis et donc jquery ne chargeait pas. Après avoir redémarré le navigateur, il a travaillé.

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