Question

我正在使用twitter bootstrap和transition.js插件进行崩溃，如此处所述。

http://getbootstrap.com/javascript/#collapse

我有两个问题：

如何从效果中删除动画？它应该立即打开和关闭。
如何为开放式面板提供不同的背景颜色？

Answer 1

要删除动画效果，您需要覆盖.collapsing类，将其添加到CSS中：

.collapsing{
    -webkit-transition: none;
          transition: none;
}

现在，要设置活动面板的样式，您需要实现一些jQuery代码，以便在显示面板时添加自定义类，因为默认情况下，只有panel-body容器标有in类，并且你无法用那个目标来定位标题。这样的事情应该有效：

$('#accordion').on('show.bs.collapse','.panel-collapse',function(e){
    $(this).closest('.panel').addClass('active').siblings('.panel').removeClass('active');
});

然后您可以将CSS规则添加为：

#accordion .active .panel-heading{
    background: darkgrey;
}

#accordion .active .panel-body{
    background: #ccc;
}

这是 working demo

*注意：不要忘记将“活动”类添加到默认打开的窗格（如果有）

Bootstrap：从transition.js中删除动画

1 个答案: