【问题标题】: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 时遇到了同样的问题。

标签: javascript twitter-bootstrap accordion collapse


【解决方案1】:

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

【讨论】:

  • 在调试 Collapse 类一小时后,我发现了与您相同的双重加载问题。我使用 twitter-bootstrap-rails 来包含引导程序。
  • 我们通过需要 bootstrap.js 的菜单遇到了同样的事情,然后使用 require 在应用程序中重新加载它。我们通过在我们的应用程序中使用显式 javascript 而不是数据注释来处理手风琴展开/折叠来解决它。
  • 这里有同样的问题 - 至少花了一个小时,也许更多,调试它才意识到 bootstrap.min.js 被两个不同的文件包含两次。我解决了这个问题(直到阅读完这篇文章后我才想到),现在它可以完美运行了。感谢您首先犯了这个错误并考虑记录它!
  • 我的 Drupal 主题需要引导,子主题也需要库,删除了 custom_theme.libraries.yml 中的行
【解决方案2】:

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

【讨论】:

    猜你喜欢
    • 2015-08-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-19
    • 1970-01-01
    • 2011-04-25
    • 1970-01-01
    相关资源
    最近更新 更多