Javascript Bootstrap崩溃的一些问题&x2B；选项卡导航

JsFiddle:

Bug只会在IE 10中重现（chrome、firefox的表现非常好）。 IE 9不支持css转换，所以不会重现该错误。 在IE11和在IE10模式下工作的IE11中不会重现错误。 （请参阅我上次的编辑，此信息不相关）

复制错误的步骤：

<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" ng-app="myApp" ng-controller="MyCtrl">
    <div id="first" class="tab-pane">
        <a id="anchor" ng-click="navigate()">Link to open accordion</a>
    </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">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Table Head</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <a id="anchor-inner" href="#second-inner" data-toggle="collapse">
                                    Inner link
                                </a>
                            </td>
                        </tr>
                        <tr class="collapse-row">
                            <td>
                                <div id="second-inner" class="collapse">
                                    <div class="inner-description">
                                        Description
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

var module = angular.module('myApp', []);

module.controller('MyCtrl', function($scope){
    $scope.navigate = function(){
        $('#mainTab li:eq(1) a').tab('show');

        var inner = $('#second-inner');

        if (!$(inner).parents('.collapse').hasClass('in')) {
            $(inner).parents('.collapse').collapse('show');
        }
        if (!$(inner).hasClass('in')) {
            $(inner).collapse('show');
        }
    };  
});

$(document).ready(function(){
    var collapse = $('.collapse');

    collapse.on('hidden', function (event) {
        $(event.target).children().hide();
    });

    collapse.on('show', function (event) {
        $(event.target).children().show();
    });    
});

单击“第二”选项卡

点击“标题”折叠

单击“内部链接”打开内部折叠

再次单击“内部链接”关闭内部折叠

单击“第一”选项卡

点击“打开手风琴的链接”

尝试打开关闭内部塌陷和主塌陷

预期结果：崩塌打开和关闭都非常好。 实际结果：崩溃不起作用

HTML:

<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" ng-app="myApp" ng-controller="MyCtrl">
    <div id="first" class="tab-pane">
        <a id="anchor" ng-click="navigate()">Link to open accordion</a>
    </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">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Table Head</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <a id="anchor-inner" href="#second-inner" data-toggle="collapse">
                                    Inner link
                                </a>
                            </td>
                        </tr>
                        <tr class="collapse-row">
                            <td>
                                <div id="second-inner" class="collapse">
                                    <div class="inner-description">
                                        Description
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

var module = angular.module('myApp', []);

module.controller('MyCtrl', function($scope){
    $scope.navigate = function(){
        $('#mainTab li:eq(1) a').tab('show');

        var inner = $('#second-inner');

        if (!$(inner).parents('.collapse').hasClass('in')) {
            $(inner).parents('.collapse').collapse('show');
        }
        if (!$(inner).hasClass('in')) {
            $(inner).collapse('show');
        }
    };  
});

$(document).ready(function(){
    var collapse = $('.collapse');

    collapse.on('hidden', function (event) {
        $(event.target).children().hide();
    });

    collapse.on('show', function (event) {
        $(event.target).children().show();
    });    
});

另外，这个bug似乎只有在使用AngularJs时才会被复制（参见我的上一次编辑，此信息不相关）在IE 10中，没有引发“transitionend”事件，这就是折叠被卡住的原因，但为什么没有引发它

编辑：

<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" ng-app="myApp" ng-controller="MyCtrl">
    <div id="first" class="tab-pane">
        <a id="anchor" ng-click="navigate()">Link to open accordion</a>
    </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">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Table Head</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <a id="anchor-inner" href="#second-inner" data-toggle="collapse">
                                    Inner link
                                </a>
                            </td>
                        </tr>
                        <tr class="collapse-row">
                            <td>
                                <div id="second-inner" class="collapse">
                                    <div class="inner-description">
                                        Description
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

var module = angular.module('myApp', []);

module.controller('MyCtrl', function($scope){
    $scope.navigate = function(){
        $('#mainTab li:eq(1) a').tab('show');

        var inner = $('#second-inner');

        if (!$(inner).parents('.collapse').hasClass('in')) {
            $(inner).parents('.collapse').collapse('show');
        }
        if (!$(inner).hasClass('in')) {
            $(inner).collapse('show');
        }
    };  
});

$(document).ready(function(){
    var collapse = $('.collapse');

    collapse.on('hidden', function (event) {
        $(event.target).children().hide();
    });

    collapse.on('show', function (event) {
        $(event.target).children().show();
    });    
});

在没有AngularJS的情况下以及在所有浏览器中都会复制Bug。我在回答中添加了一些评论。您只需单击选项卡（其中包含折叠元素），然后立即单击折叠标题展开，就可以重现该错误。在旧的JSFIDLE中尝试几次。

在setTimeOut 0中包装对collapse（'show'）的调用在我的情况下有效

编辑：

<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" ng-app="myApp" ng-controller="MyCtrl">
    <div id="first" class="tab-pane">
        <a id="anchor" ng-click="navigate()">Link to open accordion</a>
    </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">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Table Head</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <a id="anchor-inner" href="#second-inner" data-toggle="collapse">
                                    Inner link
                                </a>
                            </td>
                        </tr>
                        <tr class="collapse-row">
                            <td>
                                <div id="second-inner" class="collapse">
                                    <div class="inner-description">
                                        Description
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

var module = angular.module('myApp', []);

module.controller('MyCtrl', function($scope){
    $scope.navigate = function(){
        $('#mainTab li:eq(1) a').tab('show');

        var inner = $('#second-inner');

        if (!$(inner).parents('.collapse').hasClass('in')) {
            $(inner).parents('.collapse').collapse('show');
        }
        if (!$(inner).hasClass('in')) {
            $(inner).collapse('show');
        }
    };  
});

$(document).ready(function(){
    var collapse = $('.collapse');

    collapse.on('hidden', function (event) {
        $(event.target).children().hide();
    });

    collapse.on('show', function (event) {
        $(event.target).children().show();
    });    
});

我终于发现了问题的真正根源，以及为什么要设置超时来解决它。显然，在取消隐藏折叠元素并立即与它们交互时，您应该非常小心，因为transitionEnd事件可能不会触发。您可以在此处找到详细信息：。因此，您最好将超时设置为20，而不是零。此外，如果用户打开带有折叠的选项卡并立即单击折叠，则可能会在chrome中实现收支平衡。

尝试使用引导Ui

---

它的特殊库编写功能与angular配合使用bootstrap。

是的，这是该问题的可能解决方案之一，但该项目上已经编写了太多代码，使用bootstrap ui需要付出太多的努力。谢谢你的回复：）