如何使用 jQuery 将 slideDown() 功能添加到引导程序 4 中的卡体

Question

这是我的卡片的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-img-top上时card-body。 我正在尝试使用 jQuery，但我无法让它工作。她是我对jQuery代码的尝试：

<script>
$(".card-img-top").click(function() {
$(".card-body").slideUp();
});
</script>

Answer 1

代码的问题在于，当您运行循环以创建卡片时，有许多卡片具有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');
});