twitter bootstrap下拉菜单在django模板中不起作用 [英] twitter bootstrap dropdown not working in django template
本文介绍了twitter bootstrap下拉菜单在django模板中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题是，twitter bootstrap的下拉菜单（对于导航栏）不适用于我，我现在很失落。
我的标题代码（所以是的，我包括他们的.js并调用它）：
< head>
< title> {％block title％}用户测试{％endblock％}< / title>
<！ - 用于IE6-8支持HTML元素 - >
<！ - [if lt IE 9]>
< script src =http://html5shim.googlecode.com/svn/trunk/html5.js>< / script>
<！[endif] - >
< script type =text / javascriptsrc =http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js>< / script> <！ - 下拉插件 - >
< script type =text / javascriptsrc =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 =stylesheettype =text / csshref ={{STATIC_URL}} style.css/><！ - 链接到我的style.css- - >
< link rel =stylesheettype =text / csshref =http://twitter.github.com/bootstrap/assets/css/bootstrap.css/><！ - 链接到引导程序的CSS - >
假设的菜单项要下拉菜单：
< ul class =nav>
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdown>
{％trans登录％}：{{user.username}}
< b class =caret>< / b>
< / a>
< ul class =dropdown-menu>
< li>< a href ={％url auth_password_change％}> {％trans更改密码％}< / a>< / li>
< li>< a href ={％url auth_logout％}> {％trans注销％}< / a>< / li>
< / ul>
< / li>
< li>< a href =/ upload /> {{上传您的CVS}}< / a>< / li>
< li>< a href =/ settings /> {％trans设置％}< / a>< / li>
< / ul>
再次感谢
blargie-bla
解决方案
切换您的js包含的顺序，以便jQuery首先加载。
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js >< /脚本><！ - 的jquery - >
< script type =text / javascriptsrc =http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js>< / script><！ - - 下载插件 - >
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
解决方案
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-->
这篇关于twitter bootstrap下拉菜单在django模板中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
