Question

我在我的网站上使用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>

Answer 1

此处解决此问题： How do you make Twitter Bootstrap Accordion keep one group open?

感谢@ aron.lakatos指出另一个已解决的问题。虽然问题是相同的，但在这个问题后几周，问了解问题：）

Answer 2

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锚点的默认行为

Answer 3

当有人点击活动组时，你必须阻止Bootstrap做任何事情。

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

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

bootstrap框架 - 至少有一个手风琴（又名折叠）项目随时打开

3 个答案: