手风琴不会塌陷

Posted 2023-03-24

【中文标题】手风琴不会塌陷

【英文标题】：Accordion doesn't collapse

【发布时间】：2012-09-20 17:15:28

【问题描述】：

以下手风琴代码对我来说无法正常工作。

<div class="accordion" id="accordion1">
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse"
           data-parent="#accordion1" href="#note1">
          Foo
        </a>
      </div>
      <div class="accordion-body collapse" id="note1">
        <div class="accordion-inner">
          <pre>Foo body</pre>
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse"
           data-parent="#accordion1" href="#note2">
          Bar
        </a>
      </div>
      <div class="accordion-body collapse" id="note2">
        <div class="accordion-inner">
          <pre>Bar body</pre>
        </div>
      </div>
    </div>
</div>

它显示并且项目正确展开，但项目不会折叠。当我单击一个打开的项目时，它会短暂折叠，然后再次展开。我在引导程序版本 2.1.0 和 2.1.1 上看到了这种行为。另外，我正在使用 JQuery 1.7.2 和 1.8.2 并在 Chrome 22 中查看。

【问题讨论】：

对我来说很好。你的头部是什么样的？你提到你正在使用两个版本的 jquery，为什么？另外，您包括哪些版本的引导 js？单个插件还是插件包？

是的，它在 jsfiddle 上对我来说也很好，但在我的网站上仍然无法正常工作。我没有同时使用两个版本。我只是想让人们知道我已经尝试过了，并且在使用两个不同版本的引导程序和两个不同版本的 JQuery 时遇到了同样的问题。

How do I get my accordion to load with all the menus closed? 的可能重复项

【参考方案1】：

问题最终是我不小心将所有 javascript 脚本文件包含了两次。删除副本修复了一切。我不知道这个错误有多普遍，但如果其他人将来遇到这个问题，那么得到这个答案而不是仅仅删除问题可能会有所帮助。

【讨论】：

在调试 Collapse 类一小时后，我发现了与您相同的双重加载问题。我使用 twitter-bootstrap-rails 来包含引导程序。

我们通过需要 bootstrap.js 的菜单遇到了同样的事情，然后使用 require 在应用程序中重新加载它。我们通过在我们的应用程序中使用显式 javascript 而不是数据注释来处理手风琴展开/折叠来解决它。

这里有同样的问题 - 至少花了一个小时，也许更多，调试它才意识到 bootstrap.min.js 被两个不同的文件包含两次。我解决了这个问题（直到阅读完这篇文章后我才想到），现在它可以完美运行了。感谢您首先犯了这个错误并考虑记录它！

我的 Drupal 主题需要引导，子主题也需要库，删除了 custom_theme.libraries.yml 中的行

【参考方案2】：

我遇到了同样的问题。问题是我在 bootstrap 之后加载了 jQuery。