twitter bootstrap 下拉菜单在 django 模板中不起作用
Posted
技术标签:
【中文标题】twitter bootstrap 下拉菜单在 django 模板中不起作用【英文标题】：twitter bootstrap dropdown not working in django template 【发布时间】：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>
再次感谢，
布拉吉-布拉
【问题讨论】：
【参考方案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 没有加载。 重新启动浏览器后，它工作了。
【讨论】：
以上是关于twitter bootstrap 下拉菜单在 django 模板中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Twitter bootstrap 在下拉菜单打开时停止传播
如何在悬停而不是单击时制作 Twitter Bootstrap 的“拆分按钮下拉菜单”下拉菜单？