如何使用jQuery向bootstrap 4中的card"/>
如何使用jQuery向bootstrap 4中的card
这是我的卡片的html代码:
<div class="row">
<% pro.forEach(function(pros){ %>
<div class="col-lg-3 col-md-4">
<div class="card mb-4 shadow ">
<img class="card-img-top " src="<%= pros.image %>">
<div class="card-body p-2 m-3">
<h5 class="card-title"><%= pros.name %></h5>
<p class="card-text my-0"><%= pros.description %></p>
</div>
</div>
</div>
<% }) %>
</div>
当鼠标悬停在card-body
上时,我想向card-img-top
添加向下滑动功能。我正在尝试使用jQuery,但无法正常工作。她是我尝试使用jQuery代码:
<script>
$(".card-img-top").click(function() {
$(".card-body").slideUp();
});
</script>
回答如下:您的代码的问题是,当您运行循环来创建卡时,有许多card-body
类的卡。另外,slideup()
用于素材UI。这是您的问题的一种解决方案,您可以根据需要进行自定义。.card-body {
overflow-y: hidden;
max-height: 500px; /* approximate max height choose whatever suits you*/
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.card-body.closed {
max-height: 0;
}
$(document).on("click", ".card-img-top" , function() {
$('.card-body').removeClass('closed');
$(this).closest('.card-body').addClass('closed');
});
更多推荐
如何使用jQuery向bootstrap 4中的card
发布评论