Twitter Bootstrap Collapse 插件方向——水平而不是垂直答案

【问题标题】：Twitter Bootstrap Collapse plugin Direction—Horizontal instead of VerticalTwitter Bootstrap Collapse 插件方向——水平而不是垂直
【发布时间】：2012-09-11 23:37:15
【问题描述】：

有没有办法从水平而不是垂直折叠 Bootstrap Collapse 插件？查看代码似乎并没有内置这种能力，但我希望我只是错过了一些东西......

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

【问题讨论】：

标签： jquery twitter-bootstrap jquery-plugins bootstrap-4

【解决方案1】：

我想出了如何在不修改或添加任何 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/

【讨论】：

查看stackoverflow.com/questions/19843732/… 和jsfiddle.net/zu5ftdjx 的工作示例
为 3.3.7 更新了工作 Bootply => bootply.com/vwS8HxEeVB
这在最新的 3.x 或 4.x 中不起作用——在此处查看我的更新：stackoverflow.com/a/44070096/171456

【解决方案2】：

使用 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;
}

【讨论】：

谢谢 - 我最初使用 Roy Daniels 的上述版本，现在我们已经升级了，想看看在 3.0 中是否有更简单的方法。
这似乎对我不起作用。我在 bootstrap 上使用 flat-ui。
有 jsfiddle 吗？

【解决方案3】：

2019 年更新

引导 4.x

Bootstrap 4 水平折叠过渡基本相同，预计可见类现在是.show 而不是.in。指定 display:block 也可能会有所帮助，因为现在很多元素都是 display: flex。

.collapse.show {
  visibility: visible;
}

4.x horizontal collapse demo
4.x sidebar demo

另见：
Bootstrap horizontal menu collapse to sidemenu
How to slide nav bar from left instead from top?

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;
}

3.x demo

【讨论】：

如何让它像垂直的水平手风琴一样，一次打开一个？
我有一些基于此示例的工作，但是当元素水平折叠时，我看到了自动换行。在这些示例中我没有看到任何阻止它的东西，我错过了什么？
@MikeFlynn 演示链接对我来说似乎是，但无论哪种方式，相关的 CSS 都在答案中

【解决方案4】：

在我的 bootstrap 3 版本（使用 LESS）中，我只需将其包含在我的全局 less 文件中：

.collapsing.width  { 
    width: 0;
    height: auto;
    .transition(width 0.35s ease);
}

额外的类必须是width，因为collapse.js 会寻找这个类来进行转换。我尝试了其他人的建议，但它们对我不起作用。

【讨论】：

这对我有用，但由于我的 less 文件没有与 bootstrap 一起编译，我必须在使用之前定义 .transition mixin：.transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; }

【解决方案5】：

它似乎不是该特定插件的选项。看起来你可能需要修改它或以某种方式连接它才能让它以这种方式工作......

看了一会儿 JS 文件后，我注意到了一些事情。首先是它看起来可能正在使用 bootstrap-transition.js ，它似乎正在使用 CSS3 过渡。所以有可能写一个新的过渡。我不能 100% 确定它是否是这样工作的。

选项一

我的建议是在 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的回调

选项二

我的第二个建议是自己写一些东西。

我的答案

最后我的回答是，从引导文档看，它似乎不是一个选项。

一些附加信息：

这个网站似乎在用 CSS3 过渡做类似的事情。 http://ricostacruz.com/jquery.transit/

【讨论】：

这也符合我的想法。利用 Bootstrap 中已有的东西会很好，所以我想我将尝试利用 bootstrap-transition.js 创建我自己的转换。感谢您的输入。我真的很感激！
没问题..祝你的编码好运！

【解决方案6】：

我认为 translateX(-100%) 和 translateX(0) 可能是要走的路，而不是动画宽度，因为在支持时正确使用硬件加速

【讨论】：

【解决方案7】：

这里的答案很好，但我必须进行一些修改以获得更清晰的双向过渡：

.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;
}

设置固定高度还有助于防止页面在元素折叠和展开时“跳跃”。

【讨论】：