javascript - 如何使用 jQuery 在 bootstrap 4 中向 card-body 添加 slideDown() 功能

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-body在鼠标悬停时添加向下滑动功能card-img-top。我正在尝试使用 jQuery，但无法正常工作。她是我对 jQuery 代码的尝试：

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

标签： javascripthtmljquerynode.jsexpress

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');
});