Bootstrap 3崩溃显示和隐藏重叠彼此

Question

我有一个使用bootstrap 3的网站，当图像被点击时正在做一个崩溃面板。我有代码的地方，手表的"show"事件，将"隐藏"所有面板。我遇到的问题是，过渡动画没有等待彼此完成，导致一些奇怪的动画发生。示例页面在这里(http://urbantimber.ca/newsite/product-flooring.html)。

我的函数如下:

    $(function () {
        var active = true;
        $('#accordion').on('show.bs.collapse', function () {
            if (active) $('#accordion .in').collapse('hide');
        });
    });

我也试图通过将速度设置为0.001s来消除过渡，但斑点仍然显示。

寻找任何关于如何观看动画完成之前显示事件完成的想法。我认为它需要是一个点击事件，发生在节目甚至开始之前，但我不知道如何去做这个。如有任何意见或建议，欢迎指教。

Answer 1

我想知道你是不是最好创建自己的实现。你并没有真正使用任何类似"手风琴"的功能。也许在每个图像上附加一个click事件处理程序会更容易，该处理程序检查细节面板是否显示，如果没有，您只需使用jquery show方法显示它。如果它已经显示出来了，您可以用该项的详细信息替换面板html。(顺便说一句，这个网站很好看)。