引导框架 - 始终打开至少一个手风琴（又名折叠）项目答案

【问题标题】：bootstrap framework - have at least one accordion (aka collapse) item open at all times引导框架 - 始终打开至少一个手风琴（又名折叠）项目
【发布时间】：2013-02-24 12:21:24
【问题描述】：

我在我的网站上使用 Bootstrap，只是在某些页面内容中添加了一个手风琴，也就是折叠。

它工作正常，但我想保持始终打开至少一个面板。

目前，面板总是切换打开/关闭，请参见下面的示例：

http://twitter.github.com/bootstrap/javascript.html#collapse

有没有人找到解决方法？

这是来自 Boostrap 网站的代码，与我当前的实现类似（使用数据属性对其进行初始化）：

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>

【问题讨论】：

我也有同样的担忧。如果您找到解决方案，请发布。谢谢！
也有同样的问题。像@MattJohnson 我已经尝试过尝试阻止默认隐藏事件但没有运气的解决方案。
可能重复，解决方法在这里：stackoverflow.com/questions/15725717/…

标签： jquery twitter-bootstrap accordion collapse

【解决方案1】：

当有人点击活动组时，您必须阻止 Bootstrap 执行任何操作。

在 bootstrap-collapse.js 中搜索处理此问题的函数。

你看过http://twitter.github.com/bootstrap/javascript.html#collapse > 用法 > 选项吗？

【讨论】：

它描述的唯一看起来很有希望的是hide 事件。有人会认为您可以只处理该事件并返回 false，但这并不能始终如一地工作。
只需添加 class="accordion-body collapse in" 而不是 class="accordion-body collapse"。在添加“in”后，该组将保持打开状态。

【解决方案2】：

这个问题的解决方法： How do you make Twitter Bootstrap Accordion keep one group open?

感谢@aron.lakatos 指出另一个已解决的问题。虽然问题是相同的，但在这个问题之后的几周内，有人问到了已解决的问题:)

【讨论】：

【解决方案3】：

http://jsfiddle.net/SMT9D/61/

$('.accordion-toggle').on('click',function(e){
    if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){
        e.preventDefault();
        e.stopPropagation();
    }
});

您应该添加e.preventDefault(); 以防止在页面中有滚动条时# HTML 锚点的默认行为

【讨论】：