Bootstrap3.Collapse.Expandable Table

• 关于Collapse状态按钮图标

• 注意

以前写过一篇 collapse 的简单应用： Bootstrap.Collapse

这次还用到了 Expandable Table 和 Glyphicons 图标

Bootstrap 3 甚至是 mini ver 都包含了以下插件相关的 js

用例

(html 代码，防止被解析请清除 start tag 里面的空格)

代码语言：javascript复制

	< tr data-toggle="collapse" href="#finding">
		< td>
			< span class="glyphicon glyphicon-plus-sign"></span>
			……
		</ td>
		< td align="center">#NumItems#</td>
		……
	</ tr>

	< tr id="finding" class="collapse" aria-expanded="false">
			……
	</ tr>

几个要点：

• 响应部分
  • 设置data-toggle="collapse"
  • 设置 href 的值为对应被响应部分的选择器字串
• 被响应部分
  • 设置class="collapse" aria-expanded="false"
  • 使其能够被响应部分的 href 选择器选中即可

关于 Collapse 状态按钮图标

这里使用的是通过 Class 来添加按钮的方式，展开后为减号，未展开为加号

• 设置其class="glyphicon glyphicon-plus-sign"即可前端添加一个加号按钮
• 建议放到一个空的 span 当中
• 当点击的时候可以调用以下这段 js 则在可以在点击后改变按钮

注意

过渡效果的 transition.js 未被引用或者浏览器不支持的时候，点击按钮后会立刻执行 onclick 让按钮改变，而 collapse 效果一段时间过渡，onclick 事件完成过快可能导致 collapse 效果和按钮变化不同步（多次点击可能出现显示错误，因为 collapse 太慢了 o(` · ~ · ′。)o ），这时候只需要关闭过渡效果即可

代码语言：javascript复制

	$( document ).ready(function() {
		// 关闭过渡效果
		// $.support.transition = false;

		$('.glyphicon').click(function(){
			if ($(this).hasClass('glyphicon-plus-sign') ) {
				$(this).removeClass('glyphicon-plus-sign');
				$(this).addClass('glyphicon-minus-sign');
			}else{
				$(this).removeClass('glyphicon-minus-sign');
				$(this).addClass('glyphicon-plus-sign');
			};
		});
	});

突然想换 Hexo 了怎么办

参考文献

• Bootstrap3 组件

bootstrap jquery

0 人点赞