Question

我在我的项目中使用bootstrap手风琴（折叠），但不幸的是结果不是你想要的。手风琴中有大约8个项目，其中一些内部有很多文字（有时超过半页）。

我试图用手风琴折叠/展开项目，但这种行为完全是奇怪的，不可预测的。我刚刚在他们的网站上复制了这个例子并添加了更多项目。我的期望是，每次我点击一个已关闭的项目，它将打开，而open div将获得焦点。有时我看到页面滚动非常快，焦点位于错误的位置或项目被打开但页面上的焦点太低而且标题不可见。

有关如何正确处理手风琴或有什么正确行为的想法吗？

Answer 1

这是一个工作示例http://jsfiddle.net/panchroma/RdK8t/

直接从the bootstrap example获取，其中扩展内容已添加到其中一个元素中。

典型代码是：

<div class="accordion" id="accordionParent"> <!-- start #accordionParent wrap -->


      <!-- start typical content group -->  
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionParent" href="#collapseOne">
                  Collapsible Group Item #1
                </a>
              </div>
              <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
                        content
                </div>
              </div> 
            </div>  
       <!-- end typical content group -->


</div>  <!-- end accordionParent wrap -->

您可以验证您的页面以确保没有嵌套问题，并仔细检查如果您没有使用完整的bootstrap js文件，请确保包含过渡插件。

希望这有帮助！

Twitter引导手风琴奇怪的行为

1 个答案: