javascript - Bootstrap collapse + Tab导航的一些问题

  显示原文与译文双语对照的内容

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

Bug 仅在 IE 10 ( Chrome,Firefox 工作正常) 中重复 Bug 不在 IE 9中复制,因为它不支持css转换。 Bug 在 IE 11和 IE 11中未复制,在 IE 10模式下工作。 ( 。查看我的上次编辑,这里信息不相关)

复制的步骤有:

  1. 单击"第二个"选项卡。
  2. 点击"标题"collapse 。
  3. 通过单击"内部链接"打开内部折叠。
  4. 再次单击"内部链接"关闭内部折叠。
  5. 单击"首"选项卡。
  6. 点击"链接打开 accordion"。
  7. 尝试打开闭合内部塌陷和主 collapse 。

预期的预期结果:collapses打开并关闭 fine fine 。 实际结果:折叠失败。

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

P.S 。只有在使用AngularJs时,Bug 才会被复制。 在 IE 10中, ( 。查看我的上次编辑,这里信息不相关) somehow somehow事件不会引发,这就是崩溃的原因,但为什么它不会被引发。

编辑:

Bug 在所有浏览器中都没有使用 AngularJS 。 我在答案中添加了注释。 只需单击选项卡( 折叠元素中的折叠元素),然后立即单击 collapse header 扩展,可以重现 Bug 。 在旧jsfiddle中尝试几次。

时间: 作者:

尝试使用 Bootstrap Ui http://angular-ui.github.io/bootstrap/ 它的特殊库编写来协作 Bootstrap 与 Angular 。

...