一些問題，引導倒塌+ Tab鍵導航

Question

的jsfiddle：http://jsfiddle.net/p5sZJ/10/

錯誤是隻在IE 10中再現（瀏覽器，Firefox工作完全正常）。 錯誤不會在IE 9中重現，因爲它不支持css轉換。 錯誤不會在IE 11和IE 11模式下工作的IE 11中重現。 （見我最後一次編輯，此信息是不相關的）

步驟來重現錯誤：

1. 點擊 「第二」 標籤。
2. 單擊「標題」摺疊。
3. 點擊「內部鏈接」打開內部摺疊。
4. 再次單擊「內部鏈接」關閉內部摺疊。
5. 點擊「第一個」標籤。
6. 點擊「打開手風琴的鏈接」。
7. 嘗試打開關閉內部摺疊和主要摺疊。

預期結果：摺疊打開和關閉完全罰款。 實際結果：崩潰不工作。

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

附：似乎只有在使用AngularJs時纔會重現該錯誤。 （看我最後的編輯，這個信息是不相關的）不知何故在IE 10中'transitionend'事件不會引發，這就是崩潰被卡住的原因，但爲什麼不提高。

編輯：

錯誤是沒有AngularJS並在所有瀏覽器再現。我已將評論添加到我的答案中。您只需單擊選項卡（摺疊後的摺疊元素），然後立即單擊摺疊標題展開即可重現該錯誤。在舊的jsfiddle中嘗試幾次。

Answer 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中打開。

Answer 2

嘗試使用引導Ui http://angular-ui.github.io/bootstrap/ 其特殊的庫寫入與角度合作bootstrap。