Bootstrap折叠和选项卡导航。如果在导航到选项卡后立即展开,则折叠会冻结

时间:2014-07-30 10:34:19

标签: html css twitter-bootstrap

简单的JsFiddle:http://jsfiddle.net/p5sZJ/17/

<ul id="mainTab" class="nav nav-tabs">
    <li><a href="#first" data-toggle="tab">First</a></li>
    <li><a href="#second" data-toggle="tab">Second</a></li>
</ul>

<div id="mainTabContent" class="tab-content">
    <div id="first" class="tab-pane">
    </div>

    <div id="second" class="tab-pane">
        <div id="second-accordion" class="accordion">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" href="#second-body">
                        Heading
                    </a>
                </div>
                <div id="second-body" class="accordion-body collapse">
                    Content
                </div>
            </div>
        </div>
    </div>
</div>

前提条件: 1.确保第一个选项卡处于活动状态。 2.确保第二个标签上的手风琴折叠。

重现的步骤: 1.单击导航到第二个选项卡,然后立即单击手风琴的标题。 2.尝试扩展/折叠手风琴。

预期结果:手风琴仍然有效。 实际结果:手风琴在折叠状态下冻结,无法扩展。

注意:在重现错误之前,您可能需要多次重复这些操作。

我的问题基于我刚才提出的另一个问题:

Some problems with Bootstrap collapse + Tab navigation

我也读过这个问题,但也有点不同:

Twitter bootstrap expand/collapse all - within bootstrap tabs

我认为手风琴卡住了,因为浏览器(我在 chrome 36.0.1985.125 m 中重现了这个问题)仍然认为手风琴是隐藏的并且不会触发'过渡期'事件。一致地永远停留在过渡状态。

当我以编程方式打开选项卡时(如第一个问题)我可以设置超时来解决此问题,我不认为在这种情况下我可以这样做。

修改 刚试过FF。无法重现

编辑2: 也许我对重现问题的步骤并不完全正确。试着快速完成以下周期: 1.打开第二个选项卡。 2.打开手风琴。 3.关闭手风琴。 4.打开第一个选项卡。 5.从第一步开始重复。

可能是手风琴在隐藏过程中卡住了,你点击了第一个标签。

编辑3: 是的,我认为第二组步骤是正确的。

编辑4: 链接到swf文件与我的视频再现问题。 http://1drv.ms/1ttaeJr

我的问题是解决这种特殊情况的最佳方法是什么?

0 个答案:

没有答案