twitter bootstrap dropdown not working in django template

问题

Thanks for trying to help in advance!

My problem is that twitter bootstrap's dropdown menu (for navbar) doesn't work for me and I am very lost now. My header code (so yes, I do include their .js and call it):

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

The menu item that is suppose to have dropdown:

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

Thanks again,

blargie-bla

回答1:

Switch the order of your js includes so jQuery is loaded first.

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

回答2:

you must use the last version of jquery (1.7)

回答3:

As John Said I indeed needed to change the lines. For some magical reason (still don't know why!) it was breaking at the breakpoints that weren't even set and hence jquery wasn't loading. After rebooting the browser, it worked.

来源：https://stackoverflow.com/questions/9300663/twitter-bootstrap-dropdown-not-working-in-django-template

标签

jquery

html

django-templates

drop-down-menu

twitter-bootstrap