Django Twitter-bootstrap：崩溃不起作用

Posted

技术标签:

【中文标题】Django Twitter-bootstrap：崩溃不起作用【英文标题】：Django Twitter-bootstrap : collapse not working 【发布时间】：2017-01-30 19:03:30 【问题描述】：

我试图在我的 Django 项目中包含一个非常简单的折叠。 我试图将它减少到最低限度，但它仍然没有工作。

仅供参考，我尝试使用 pip install django-static-jquery==2.1.4 安装 jquery，最后在我的 <head> 中包含 jquery 脚本。

这是我的文件： 1.一个简单的base.html文件扩展在我的其他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（引导文档） 和here（另一个SO问题）

欢迎任何帮助/建议。

【问题讨论】：

尝试使用a标签，而不是span。对于按钮。此外，检查浏览器控制台是否有任何错误并清除它们。 我也尝试了a 标签，但它仍然不起作用。在控制台中，我一无所获（我激活了各种日志） 【参考方案1】：

通过检查 JQuery 是否实际加载（参见 here）来检查问题不在于 JQuery 之后，我认为问题可能在于 Bootstrap。

问题是，自从我开始编码以来，我从来不需要 Twitter-Bootstrap 的 javascript 部分。所以你可以在上面的 base.html 中看到，我只包含了 bootstrap.css 而没有包含 bootstrap.js

所以我的文件头现在看起来像：

<html>
    <head>
        <link href="% static 'confWeb/confWeb.css' %" rel="stylesheet" type ="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link href="% static 'confWeb/bootstrap.css' %" rel="stylesheet" type ="text/css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <title>Configuration Amplivia</title>
    </head>
    <body>...</body>

请注意，Twitter Bootstrap Javascript 不适用于低于 1.9.1 或高于 4 的 jquery 版本。

【讨论】：

【参考方案2】：

我认为您缺少包装 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>

【讨论】：

对不起，我的问题出在其他地方（这是因为 Bootstrap 包含明显的内容，我现在会发布）。所以我不需要面板和手风琴课程。我也认为手风琴是不需要的。仅当您想要零个或一个扩展部分时。不过还是谢谢！ 我认为您想要它，因为您有一个针对它的属性。

以上是关于Django Twitter-bootstrap：崩溃不起作用的主要内容，如果未能解决你的问题，请参考以下文章

Django Twitter-bootstrap：崩溃不起作用

Twitter-Bootstrap 5 轮播指示器和控件不起作用。为啥？

如何创建可打印的 Twitter-Bootstrap 页面

导航栏顶部的 Twitter-Bootstrap-2 徽标图像

Twitter-bootstrap 模式未在页面加载时显示（灰屏）

自动播放时 twitter-bootstrap 轮播导航和内容不同步