JsFiddle: http://jsfiddle.net/p5sZJ/10/
Bug仅在IE 10中再现 (chrome,firefox工作得很好)。 在IE 9中不会再现Bug,因为它不支持css转换。 在IE 11和在IE 10模式下工作的IE 11中不会再现错误。 (请参阅我上一次编辑,此信息无关紧要)
重现错误的步骤:
预期结果:折叠打开和关闭完全正常。 实际结果:折叠不起作用。
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中尝试几次。
答案 0 :(得分:1)
在setTimeOut 0中包含对折叠('show')的调用在我的案例中起作用。
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。