如何在 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>
最佳答案
在我的解决方案中,您可以在触发器元素上使用 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>
关于javascript - Bootstrap 中延迟显示崩溃?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44190632/