gpt4 book ai didi

javascript - Bootstrap 折叠垂直拨动开关

转载 作者:太空宇宙 更新时间:2023-11-04 14:25:50 25 4
gpt4 key购买 nike

$('#demo').on('hidden', function () {
$('#divbody').removeClass('span4').addClass('span8');
});

单击按钮时:demo div 垂直折叠(即宽度 = 0),效果很好。但是我想增加 divbody div 来填充页面,即 span8。 JS 代码在那里,但我想像 demo div 折叠时那样做动画。

最佳答案

希望这可以帮助您获得一个想法,我没有太多的东西可以解决您的 fiddle 问题。但这应该可以帮助您入门。

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

关于javascript - Bootstrap 折叠垂直拨动开关,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19561022/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com