有没有一种方法可以使Bootstrap Collapse插件从水平方向而不是垂直方向折叠?查看代码,似乎没有内置此功能,但我希望我只是忽略了什么...
任何帮助将不胜感激。谢谢!
有没有一种方法可以使Bootstrap Collapse插件从水平方向而不是垂直方向折叠?查看代码,似乎没有内置此功能,但我希望我只是忽略了什么...
任何帮助将不胜感激。谢谢!
我发现如何在不修改或添加任何JavaScript的情况下轻松实现此目的。
首先,在所有Twitter Bootstrap CSS之后定义以下CSS:
.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/
在Bootstrap 3.0.0中,您只需向目标元素添加宽度类,并添加以下CSS即可使其动画化。
.collapse.width {
height: auto;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
更新于2019年
Bootstrap 4.x
Bootstrap 4的水平折叠过渡基本相同,唯一不同的是可见类现在为.show
而不是.in
。由于许多元素现在是display: flex,因此指定display:block可能会有所帮助。
.collapse.show {
visibility: visible;
}
另请参见:
Bootstrap水平菜单折叠到侧边菜单
如何从左侧而不是从顶部滑动导航栏?
Bootstrap 3.3.7 (原始答案)
对我来说,现有的任何答案都没有用。要使最新版本中的折叠动画为水平方向,您需要将过渡设置为宽度,并且还要使用visibility。
.collapse {
visibility: hidden;
}
.collapse.in {
visibility: visible;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {
-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
.collapsing.width {
width: 0;
height: auto;
.transition(width 0.35s ease);
}
width
,因为collapse.js寻找这个类进行过渡动画。我尝试了其他人的建议,但对我没有用。.transition
mixin:.transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; }
- yellowcap该特定插件似乎没有这个选项。看起来你可能需要修改它或以某种方式挂接它才能以那种方式工作...
仔细查看JS文件后,我注意到了几件事情。首先,它似乎可能使用bootstrap-transition.js,该文件似乎正在使用CSS3过渡效果。因此,编写新的过渡效果可能是可行的。但我不确定它是否是这样工作的。
方案一
我的建议是在bootstrap-collapse.js插件文件中逛逛,看看能否弄清楚它是如何工作的。
特别是要看看这部分...bootstrap-carousel.js
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
看起来.transition
是来自于bootstrap-transition.js的回调函数。
第二个选项
我的第二个建议是自己编写一些内容。
我的答案
最后我的答案是,从查看Bootstrap文档中似乎没有这个选项。
一些附加信息:
这个网站似乎正在使用CSS3过渡效果进行类似的操作。 http://ricostacruz.com/jquery.transit/
这里有些不错的答案,但我做了一些修改以获得更干净、双向的过渡:
.collapse.width, .collapsing {
height: 25px; /* depending on your element height */
overflow: hidden;
-webkit-transition: width 0.25s ease;
-moz-transition: width 0.25s ease;
-o-transition: width 0.25s ease;
transition: width 0.25s ease;
}