分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap 3.0水平折叠 – 在Chrome中弹跳，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我按照这里的说明( https://stackoverflow.com/a/18602739/2966090)在Bootstrap 3.0.2中水平折叠元素.

这种方法在Firefox和Firefox中运行良好. Internet Explorer,但在Chrome中显示出奇怪的反弹. Chrome也没有任何隐藏转换.

我用这里的行为创建了一个测试：http://jsfiddle.net/eT8KH/1/

这是相关的代码(也在jsfiddle上)：

CSS

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

HTML

<button type="button" class="btn btn-priMary" data-toggle="collapse" data-target="#demo">
    Horizontal Collapsible
</button>

<div id="container" style="width:200px;">
    <div id="demo" class="collapse in width" style="BACkground-color:yellow;">
        <div style="padding: 20px; overflow:hidden; width:200px;">
            Here is my content
        </div>
    </div>
</div>

有没有办法来解决这个问题？或者它是Chrome中的错误？

解决方法

我能够重现您的问题,但我找到的解决方案与Chrome无关.

我发现一些CSS代码丢失了,插件代码中有一些“bug”.我已经写了一个公关来解决这个问题,请参阅：https://github.com/twbs/bootstrap/pull/15104

演示：http://jsfiddle.net/zu5ftdjx/

要在当前代码中修复此问题：

在collapse.js中：
第104行应该成为这个.$element [dimension](this.$element [dimension]())[0] [$.camelCase([‘inner’,dimension] .join(”))]

少(在组件 – 动画.无)

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition-property(~"height,visibility");
  &.width {
  .transition-property(~"width,visibility");
  width:0;
  height:auto;
  }
  .transition-duration(.35s);
  .transition-timing-function(easE);
}

css(前面的Less代码的编译输出)

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