JsFiddle: http://jsfiddle.net/p5sZJ/10/
Баг воспроизводится только в IE 10 (хром, фаерфокс работают отлично). Ошибка не воспроизводится в IE 9, потому что он не поддерживает переходы css. Ошибка не воспроизводится в IE 11 и в IE 11, работающем в режиме IE 10. (см. мое последнее редактирование, эта информация неактуальна)
Действия по воспроизведению ошибки:
- Нажмите на вкладку «Вторая».
- Нажмите на "Заголовок" свернуть.
- Откройте внутренний коллапс, нажав на «Внутреннюю ссылку».
- Закройте внутренний коллапс, снова щелкнув «Внутреннюю ссылку».
- Нажмите на вкладку «Первая».
- Нажмите «Ссылка для открытия аккордеона».
- Попробуйте открыть-закрыть внутренний обвал и основной обвал.
Ожидаемый результат: створки прекрасно открываются и закрываются. Фактический результат: свертывание не работает.
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 и во всех браузерах. Я добавил комментарии к своему ответу. Вы можете воспроизвести ошибку, просто щелкнув вкладку (в которой есть свернутый элемент), а затем сразу же щелкнув заголовок сворачивания, чтобы развернуться. Попробуйте несколько раз в старом jsfiddle.
