css - Bootstrap：从 transition.js 中删除动画

Question

我正在使用 twitter bootstrap 和transition.js插件来进行折叠，就像这里描述的那样。

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

我有两个问题：

1. 如何从效果中删除动画？它应该立即打开和关闭。

2. 我怎样才能给打开的面板一个不同的背景颜色？

Answer 1

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

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

现在，要设置活动面板的样式，您需要实现一些 jQuery 代码以在显示面板时添加自定义类，因为默认情况下，只有面板主体容器标记有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;
}

这是一个工作演示

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