Twitter引导手风琴奇怪的行为答案

【问题标题】：Twitter bootstrap accordion strange behaviorTwitter引导手风琴奇怪的行为
【发布时间】：2013-02-17 15:45:57
【问题描述】：

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

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

关于如何正确处理手风琴的任何想法或正确的行为是什么？

【问题讨论】：

标签： twitter twitter-bootstrap scroll accordion

【解决方案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 -->

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

希望这会有所帮助！

【讨论】：