【问题标题】:Twitter bootstrap 2.1.1 Collapse not animating when Opening a collapsibleTwitter bootstrap 2.1.1 打开可折叠时折叠没有动画
【发布时间】:2012-10-18 10:25:07
【问题描述】:

我正在尝试创建一个简单的按钮来打开/关闭我在 twitter 引导程序中实现的网站的可折叠部分。我想使用可折叠的 javascript 插件,但它似乎不能正常工作:折叠动画“关闭”时发生,但“打开时”它是瞬时的。

这是一个演示问题的 jsFiddle。

http://jsfiddle.net/whUvL/2/

在我的导航器(Mac 上的 Chrome 22.0.1229.94)上,第一次单击按钮时,h2 会立即“弹出”。再次单击该按钮会以漂亮的动画“折叠”h2。再次点击“显示”很快。

如何让动画在“打开时”和“关闭时”工作?我应该添加更多的 html/css,还是更改一些 js?

另外,我注意到 jquery 1.8.2 和最新的 twitter boostrap 会发生这种情况。使用 jquery 1.7.2 和 bootstrap 2.0.2 it seems to work just fine。如果可能的话,我想使用两者中的最新版本。

【问题讨论】:

    标签: javascript jquery html css twitter-bootstrap


    【解决方案1】:

    好的,我找到了问题。我是right there in the docs

    • 需要包含过渡插件。

    在我的辩护中,我必须说那部分是灰色的,不是很明显的要求。

    添加过渡模块后,动画又开始工作了:

    http://jsfiddle.net/whUvL/4/

    感谢@funzionpro,他让我走上了正轨——一旦我知道包括它工作的完整 javascripts 集,剩下的就很容易推断了。

    (我会在两天内将此答案标记为正确,在此之前我必须将其保持打开状态,因为 SO 的自动回复政策)

    【讨论】:

      【解决方案2】:

      如果添加 2.1.1 的 bootstrap.js 似乎可以正常工作

      工作小提琴:http://jsfiddle.net/whUvL/3/

      【讨论】:

      • 非常感谢您抽出宝贵时间对此进行调查。这不是完整的解决方案,但它让我走上了正确的轨道!你显然应该得到 +1。
      猜你喜欢
      • 2018-09-03
      • 1970-01-01
      • 2015-02-09
      • 1970-01-01
      • 2018-05-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多