gpt4 book ai didi

javascript - Bootstrap collapse + Tab navigation 的一些问题

转载 作者:行者123 更新时间:2023-11-28 17:57:06 26 4
gpt4 key购买 nike

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

错误仅在 IE 10 中重现(chrome、firefox 工作得很好)。错误未在 IE 9 中重现,因为它不支持 css 转换。错误不会在 IE 11 和在 IE 10 模式下工作的 IE 11 中重现。(看我最后的编辑,这个信息是无关紧要的)

重现错误的步骤:

  1. 单击“第二”选项卡。
  2. 点击“标题”折叠。
  3. 点击“内部链接”打开内部折叠。
  4. 再次点击“内部链接”关闭内部折叠。
  5. 单击“第一个”选项卡。
  6. 单击“打开 Accordion 的链接”。
  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 中尝试几次。

最佳答案

在我的案例中,在 setTimeOut 0 中包装对 collapse('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 中收支平衡。

关于javascript - Bootstrap collapse + Tab navigation 的一些问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21162313/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com