jquery – Twitter Bootstrap Collapse插件方向 – 水平而不是垂直

前端之家收集整理的这篇文章主要介绍了jquery – Twitter Bootstrap Collapse插件方向 – 水平而不是垂直前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法从水平而不是垂直折叠Bootstrap Collapse插件?看看代码这个能力似乎没有内置,但我希望我只是失去了一些东西…

任何帮助将不胜感激。谢谢!

解决方法

我想出了如何做到这一点很容易,而无需修改添加任何javascript。

首先,您在所有Twitter Bootstrap CSS之后定义以下CSS:

@H_404_10@.collapse { height: auto; width: auto; } .collapse.height { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease; } .collapse.width { position: relative; width: 0; overflow: hidden; -webkit-transition: width 0.35s ease; -moz-transition: width 0.35s ease; -o-transition: width 0.35s ease; transition: width 0.35s ease; } .collapse.in.width { width: auto; } .collapse.in.height { height: auto; }

接下来,在目标元素(您定义.collapse类)上,您需要添加类.width或.height,取决于要设置动画的属性

最后,必须包装目标元素的内容,并在显示宽度时显式定义其宽度。如果动画高度,则不需要。

您可以在这里找到一个工作示例 – > http://jsfiddle.net/ud3323/ZBAHS/

猜你在找的jQuery相关文章