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

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

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

用例

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

	< 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 ),这时候只需要关闭过渡效果即可

	$( 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了怎么办

参考文献