如何使用 jQuery 在引導程序 4 中將 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-img-top時，我想向card-body添加向下滑動功能。 我正在嘗試使用 jQuery 但我無法讓它工作。 她是我對 jQuery 代碼的嘗試：

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

Answer 1

您的代碼的問題在於，當您運行循環創建卡時，有許多卡card-body class 卡，因此，您需要定位您單擊的那張卡。 此外， 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');
});