自举折叠垂直拨动开关
Bootstrap collapse vertical toggle switch
$('#demo').on('hidden', function () {
$('#divbody').removeClass('span4').addClass('span8');
});
单击button
时:demo
div 垂直折叠(即宽度 = 0),工作正常。但我想增加div divbody
以填充页面,即 span8
.JS代码在那里,但我想像demo
div折叠时一样做动画。
希望这应该能帮助你得到一个想法,我没有很多东西可以放在你的小提琴上。 但这应该让你开始。
jQuery
$('#hideBtn').click(function(){
$('#divbody').toggleClass('span4');
$('#divbody').toggleClass('span8');
$(this).parent().toggleClass('span2');
$(this).parent().toggleClass('span1');
});
.CSS
#divbody {
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<button role="button" id="hideBtn" class="btn-danger" data-toggle="collapse" data-target="#demo"> Hide </button>
<div id="demo" class="collapse in width">
<div style="width: 400px;">
<p> This should collapse vertical (by width)</p>
</div>
</div>
</div>
<div id="divbody" class="span4">
Table comes here. This is the main body. Span should increase from 4 to 8 when div demo is collapsed. test test test test test test test test test test
</div>
</div>
</div>
例
http://www.bootply.com/90126
另一个例子,下面的按钮而不是侧面。.
http://www.bootply.com/90128
相关文章:
- 跟踪jqplot垂直折线图的鼠标位置
- AngularJS ng开关或类似的动态值工作
- 基于下拉菜单创建开关
- Javascript开关不工作
- 如何设置自定义垂直滑块Jquery的动画
- 使用Jquery Issue垂直重新排序Divs
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- 引导开关不工作
- 无法将文本与图片垂直对齐
- CodeMirror.禁用垂直滚动条
- 阻止文本区域垂直滚动
- 计算一个垂直于直线的点
- 使用jquery垂直对齐动态加载的图像
- 如何使 DIV 中的内容垂直对齐
- HTML中的垂直进度条
- 如何定义星期日和平日.按日期使用开关
- Javascript-使用“”将toDateStringMonth从文本字符串解析为数字字符串;如果“;vs“;开关”;
- 如何在响应视频上垂直居中文本
- 自举折叠垂直拨动开关
- Javascript CSS单选择开关(垂直列表)