Bootstrap折叠+ Tab导航的一些问题

时间:2014-01-16 12:50:53

标签: javascript css twitter-bootstrap

JsFiddle: http://jsfiddle.net/p5sZJ/10/

Bug仅在IE 10中再现 (chrome,firefox工作得很好)。 在IE 9中不会再现Bug,因为它不支持css转换。 在IE 11和在IE 10模式下工作的IE 11中不会再现错误。 (请参阅我上一次编辑,此信息无关紧要)

重现错误的步骤:

  1. 点击“第二个”标签。
  2. 点击“标题”崩溃。
  3. 点击“内部链接”打开内部崩溃。
  4. 再次点击“内部链接”关闭内部崩溃。
  5. 点击“首先”标签。
  6. 点击“Link to open accordion”。
  7. 尝试打开 - 关闭内部崩溃和主要崩溃。
  8. 预期结果:折叠打开和关闭完全正常。 实际结果:折叠不起作用。

    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>
    

    JS:

    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();
        });    
    });
    

    P.S。似乎只有在使用AngularJs时才会重现该错误。 (请参阅我的上一次编辑,此信息无关紧要)在IE 10中,不会引发'transitionend'事件,这就是崩溃卡住的原因,但为什么不会引发崩溃。

    修改

    在没有AngularJS的情况下以及在所有浏览器中都会复制Bug。我在评论中添加了评论。只需单击选项卡(其中包含折叠的折叠元素),然后立即单击折叠标题即可重现错误。在旧的jsfiddle中尝试几次。

2 个答案:

答案 0 :(得分:1)

在setTimeOut 0中包含对折叠('show')的调用在我的案例中起作用。

http://jsfiddle.net/p5sZJ/12/

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

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

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

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

$(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事件可能不会触发。您可以在此处找到详细信息:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions。所以你最好设置20的超时,而不是零。此外,如果用户打开带有折叠的标签并立即点击折叠,则即使在Chrome中也可能会中断。

答案 1 :(得分:0)

尝试使用bootstrap Ui http://angular-ui.github.io/bootstrap/ 它的特殊库写入与角度协作bootstrap。