我试图在我的 Django 项目中包含一个非常简单的折叠。 我试图将其减少到最低限度，但仍然没有效果。
仅供引用，我尝试使用 pip install django-static-jquery==2.1.4 安装 jquery最后，将 jquery 脚本包含在我的 <head> 中.
这是我的文件: 1.在我的其他html模板文件中扩展一个简单的base.html文件
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link href="{% static 'confWeb/confWeb.css' %}" rel="stylesheet" type ="text/css" />
<link href="{% static 'confWeb/bootstrap.css' %}" rel="stylesheet" type ="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<title>Configuration Amplivia</title>
</head>
<body>
<ul>
<li><a class="active" href="{% url 'confWeb:index' %}">Accueil</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
{% block content %}
{% endblock %}
</body>
</html>
这是我的测试文件，它从 base.html 文件扩展而来，其中有两种类型的折叠，以测试它们中的任何一个是否可以工作(并且不能) {% 扩展“./base.html” %}
{% block content %}
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<span class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Header
</span>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo">
<div class="list-group">
<a href="#" class="list-group-item">Item1</a>
<a href="#" class="list-group-item">Item2</a>
</div>
</div>
</div>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident
</div>
</div>
{% endblock %}
目前在我自己的 css 文件 (confWeb.css) 中，只有这个:
span[role="button"] {
cursor: pointer;
}
而且它根本不起作用。该按钮是可单击的，但当我使用 collapse in 时，它不会展开或折叠。 。你知道我应该改变什么吗？
仅供引用，我尝试了我发现的here ( Bootstrap 文档) 和 here (另一个SO问题)
欢迎任何帮助/建议。
最佳答案
我认为您缺少包装 class="panel" div 和 id="accordion" 容器 div。也像 @JRodDynamite 所说，你应该使用 a 标签。
我从bootstrap docs中取出了这两个丢失的div。 .
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Header
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo">
<div class="list-group">
<a href="#" class="list-group-item">Item1</a>
<a href="#" class="list-group-item">Item2</a>
</div>
</div>
</div>
</div>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident
</div>
</div>
关于jquery - Django Twitter Bootstrap : collapse not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39635020/