twitter bootstrap 下拉菜单在 django 模板中不起作用答案

【问题标题】：twitter bootstrap dropdown not working in django templatetwitter bootstrap 下拉菜单在 django 模板中不起作用
【发布时间】：2012-03-07 05:23:09
【问题描述】：

感谢您提前提供帮助！

我的问题是 twitter bootstrap 的下拉菜单（用于导航栏）对我不起作用，我现在很迷茫。我的标头代码（是的，我确实包含了他们的 .js 并调用它）：

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

假设有下拉菜单项：

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

再次感谢，

布拉吉-布拉

【问题讨论】：

标签： jquery html django-templates drop-down-menu twitter-bootstrap

【解决方案1】：

切换 js 包含的顺序，以便首先加载 jQuery。

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

您必须使用最新版本的 jquery (1.7)

【讨论】：

它也不起作用。我确实切换到了 1.7.1，然后它会在代码的一开始就中断......我基本上需要重新启动我的 chrome。

【解决方案3】：

正如约翰所说，我确实需要更改台词。出于某种神奇的原因（仍然不知道为什么！）它在甚至没有设置的断点处中断，因此 jquery 没有加载。重新启动浏览器后，它工作了。

【讨论】：