在Bootstrap中延迟显示崩溃？
在Bootstrap中延迟显示崩溃？
提问于 2017-05-26 06:15:10
如何延迟Bootstrap 4中折叠元素的显示？
例如，在下面的例子中，你延迟显示链接href按钮的内容吗？
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
< div>
</div>回答 3
Stack Overflow用户
发布于 2017-05-26 07:03:40
在我的解决方案中，您可以在触发器元素上使用data-delayed-toggle和data-delay属性来配置折叠行为：
$('[data-delayed-toggle="collapse"]').on('click', function(e) {
var delay = $(this).data('delay') || 1000;
var $target = $($(this).attr("href"));
window.setTimeout(function() {
if ($target.hasClass('show'))
$target.collapse('hide');
else
$target.collapse('show');
}, delay);
})<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<p>
<a class="btn btn-primary" data-delayed-toggle="collapse" href="#collapseExample" data-delay="300">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
< div>
</div>
Stack Overflow用户
发布于 2017-05-26 07:10:54
动画通过CSS完成，CSS类使用jQuery进行切换。
如果只是想稍微延迟一下，可以在.collapsing类上使用transition-delay:。例如，这里是2秒。
.collapsing {
-webkit-transition-delay: 2s;
transition-delay: 2s;
visibility: hidden;
}但过了一段时间，Bootstrap的JS将介入并将.show类应用于元素。因此，为了进一步延迟可见性，您还可以添加一个延迟.collapse.show...
.collapse.show {
-webkit-transition-delay: 3s;
transition-delay: 3s;
visibility: visible;
}Stack Overflow用户
发布于 2018-10-25 03:56:10
这将允许您手动或使用其他功能设置延迟，并防止在准备好之前进行转换
var delay = false,delayed=900;
$('[role="button"]') .on('click', function (e) {
var $this = $(this), href
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
if(!delay){
setTimeout(()=>{delay=true; $target.collapse(option);
delay = false },delayed);
return false
}
if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
$this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
}
$target.collapse(option)
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44190632
复制相关文章
相似问题
腾讯云开发者
