python测试开发django-188.Bootstrap折叠（Collapse）插件

Posted 上海-悠悠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python测试开发django-188.Bootstrap折叠（Collapse）插件相关的知识，希望对你有一定的参考价值。

前言

折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。
可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js

折叠（Collapse）

以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle="collapse"都是必需的。
单击下面的按钮以通过类更改显示和隐藏另一个元素：

  • .collapse隐藏内容
  • .collapsing在过渡期间应用
  • .collapse.in显示内容
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 折叠面板</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
     aria-expanded="false" aria-controls="collapseExample">
    href 关联id属性
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse"
          data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    data-target 关联id属性
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
     这一段文本可以折叠，点击后也可以展示
  </div>
</div>

</body>
</html>

实现效果，默认不展开

点击按钮后展开文本

如果想默认展开，可以通过 .collapse.in 属性控制

<div class="collapse in" id="collapseExample">
  <div class="card card-body">
     这一段文本可以折叠，点击后也可以展示
  </div>
</div>

多个折叠

只需向元素添加data-toggle="collapse"和 adata-target即可自动分配对可折叠元素的控制。
该data-target属性接受一个 CSS 选择器来应用折叠。确保将类添加collapse到可折叠元素。如果您希望它默认打开，请添加附加类in。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 折叠面板</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          折叠项 Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
         body 1 正文内容
      </div>
    </div>
  </div>
  <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">
          折叠项 Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
         正文内容2
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          折叠项 #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
         正文内容 3
      </div>
    </div>
  </div>
</div>

</body>
</html>

实现效果

通过 javascript

手动启用

$('.collapse').collapse()

.collapse(options) 将您的内容激活为可折叠元素。接受一个可选选项object。

$('#myCollapsible').collapse(
  toggle: false
)

.collapse('toggle') 将可折叠元素切换为显示或隐藏。在可折叠元素实际显示或隐藏之前（即在or事件发生之前）返回给调用者。 shown.bs.collapse, hidden.bs.collapse
.collapse(‘show’)显示可折叠元素。在可折叠元素实际显示之前（即在事件发生之前）返回给调用者。shown.bs.collapse`

.collapse(‘hide’) 隐藏可折叠元素。在可折叠元素实际被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.collapse

Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。

事件类型描述
show.bs.collapseshow调用实例方法时立即触发此事件。
shown.bs.collapse当折叠元素对用户可见时触发此事件（将等待 CSS 转换完成）​​。
hide.bs.collapsehide调用该方法时立即触发此事件。
hidden.bs.collapse当对用户隐藏折叠元素时会触发此事件（将等待 CSS 转换完成）​​。
$('#myCollapsible').on('hidden.bs.collapse', function () 
  // do something…
)

以上是关于python测试开发django-188.Bootstrap折叠（Collapse）插件的主要内容，如果未能解决你的问题，请参考以下文章

测试开发系列之Python开发mock接口

学习python 测试开发

测试开发系列之Python开发mock接口

Python 开发与接口测试学习笔记

Python：Python常用开发框架Framework(WEB测试爬虫)总结

测试开发系列之Python开发mock接口