Question

我有一个Rails应用程序并且一直在使用Bootstrap 2.3.2。我最近决定是时候升级到Bootstrap 3.执行此操作后，过去正常工作的可折叠窗格现在在Safari中完全错误，在Chrome中排版不正确。我已经适当地更新了这些类，这里是代码：

      <div class="panel-group" id="accordion2">
        <div class="panel panel-default left-column-entry" id="new-student-widget">
          <div class="header panel-heading">
            <div class='header-content panel-title'>
              <a data-toggle="collapse" id="newStudentToggle" data-parent="#accordion2" data-target="#newStudent">
                New student
              </a>
            </div>
          </div>
          <div id="newStudent" class="panel-collapse collapse">
            <div class="panel-body"  id="newStudentInner">
              <%= render 'student_profiles/new_student' %>
            </div>
          </div>
        </div>
      </div>

当我使用此代码时，在Safari中面板开始折叠，当我单击面板标题，而不是平滑地动画到打开位置时，它（第一个）立即显示没有动画，然后动画关闭，动画打开。在Chrome中，单击标题只会使其无需动画即可实现。所以在Chrome中，它更接近于正确的东西，但它显然仍然没有表现得非常正确。

我认为我的代码没有任何问题，因为当我粘贴Bootstrap 3文档中的示例代码（当然在文档中正常工作）时，它会显示相同的问题。

我认为这与我正在使用的JQuery或JQuery UI存在某种冲突。我已经看过.noConflict()方法了，但遗憾的是，我不知道这实际上是如何工作的，如何使用它，或者这是否能够解决这个问题。关于什么可能是问题或如何解决它的任何想法（特别是如果它是一个冲突？）。

更新

这是一场冲突。但不是jQuery。相反，由于我对资产管道的了解以及bootstrap-sass gem如何工作，我有两个同步版本的bootstrap运行，显然，这两个版本都是为崩溃操作执行相同的javascript。

Answer 1

我明白了。由于我对资产管道的了解以及bootstrap-sass gem如何工作，我有两个同步版本（2.3.2和3.2.x）的bootstrap运行，显然，这两个版本都执行相同的javascript崩溃在这个过程中，行动和绊倒。

Rails Bootstrap手风琴折叠并不像我预期的那样表现

1 个答案: