Bootstrap 3 -使用切换方法时手风琴效果中断

Bootstrap 3 - Accordion effect breaks when using toggle methods

本文关键字：方法 手风琴效果 中断 Bootstrap      更新时间：2023-09-26

我使用的是Bootstrap 3折叠手风琴的例子。
我注意到，当使用javascript .collapse()方法时，手风琴效果似乎出乎意料。请看这个简单的jsfiddle示例。

这里我使用$('#collapseOne').collapse('toggle');。为什么?因为要演示以下行为:

  • 最初因为这段JavaScript， 面板#1得到扩展。
  • 点击面板#2，我们可以看到手风琴的效果。
  • 点击返回面板#1会产生意想不到的行为，因为两个面板现在都展开了。

现在，如果你删除 javascript并执行以下步骤:

    点击面板#1展开
  • 点击面板#2来获得手风琴效果。
    • 再次点击面板#1，仍然给我们手风琴效果。

这里的观察是当使用.collapse('toggle')方法时，手风琴效果似乎被打破了?

是否有人认为这可能会中断或这可能是一个错误?

不，没有任何错误，因为在JavaScript你正在切换折叠面板，它删除了in类，实际上打开了折叠面板。我想问题来了。

所以，只要从#collapseOne中删除in类，一切都会正常工作，你的JavaScript代码。

希望能解决你的问题。

这里是工作小提琴

=编辑=

是的，这是一个bug!解决方案是在这篇文章和固定的jsfiddle在这里。

相关文章：