如何使用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 { 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'); });