Javascript 如何从卡片列表中一次只向上滑动一个卡片盒？

以下是我的网站代码，如下所示：

/** Card View ***/
.list-items {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}
.list-items .card{
    width: 18%;
    margin: 10px;
    background: #262626;

    position: relative;
    display: block;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15);
    transition: 0.4s linear;
}
.card:hover{
    box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.card .image{
    background: black;
    overflow: hidden;
}
.card .image img{
    height: 100%;
    width: 100%;
    transition: 0.3s;
}
.card.active .image img{
    opacity: 0.6;
    transform: scale(1.1);
}
.card .content{
    position: absolute;
    border: none;
    bottom: 0px;
    background: #262626;
    width: 100%;
    padding: 10px;
}
.content .title{
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}
.content .category{
    color: #04e0b2;
    font-size: 12px;
}
.content .bottom{
    margin-top: 5px;
}
.content .bottom button{
    width: 100%;
    border: none;
    background: #04e0b2;
    color: #ffffff;
    font-weight: 800;
    padding: 8px 0px;
    transition: 0.3s ease;
    cursor: pointer;
}
.content .bottom button:hover{
    transform: scale(0.9);
}
.content .bottom{
    display: none;
}

//Card Hover
$('.card').hover(function(){
    if($(this).hasClass('active')){
        $('.card .bottom').slideUp(function(){
            $('.card').removeClass('active');
        });
    }else{
        $('.card').addClass('active');
        $('.card .bottom').stop().slideDown();
    }
});

我的CSS如下所示：

/** Card View ***/
.list-items {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}
.list-items .card{
    width: 18%;
    margin: 10px;
    background: #262626;

    position: relative;
    display: block;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15);
    transition: 0.4s linear;
}
.card:hover{
    box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.card .image{
    background: black;
    overflow: hidden;
}
.card .image img{
    height: 100%;
    width: 100%;
    transition: 0.3s;
}
.card.active .image img{
    opacity: 0.6;
    transform: scale(1.1);
}
.card .content{
    position: absolute;
    border: none;
    bottom: 0px;
    background: #262626;
    width: 100%;
    padding: 10px;
}
.content .title{
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}
.content .category{
    color: #04e0b2;
    font-size: 12px;
}
.content .bottom{
    margin-top: 5px;
}
.content .bottom button{
    width: 100%;
    border: none;
    background: #04e0b2;
    color: #ffffff;
    font-weight: 800;
    padding: 8px 0px;
    transition: 0.3s ease;
    cursor: pointer;
}
.content .bottom button:hover{
    transform: scale(0.9);
}
.content .bottom{
    display: none;
}

//Card Hover
$('.card').hover(function(){
    if($(this).hasClass('active')){
        $('.card .bottom').slideUp(function(){
            $('.card').removeClass('active');
        });
    }else{
        $('.card').addClass('active');
        $('.card .bottom').stop().slideDown();
    }
});

这是HTML

<div class="list-items">
    <div class="card">
        <div class="image">
            <img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
        </div>
        <div class="content">
            <div class="title">Dory's Reef Cam</div>
            <div class="category">Family, Animation, Comedy, Adventure</div>
            <div class="bottom">
                <button>Play</button>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="image">
            <img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
        </div>
        <div class="content">
            <div class="title">Dory's Reef Cam</div>
            <div class="category">Family, Animation, Comedy, Adventure</div>
            <div class="bottom">
                <button>Play</button>
            </div>
        </div>
    </div>
</div>

它向上滑动所有卡片一次列出所有项目我想知道如何一次实现单个项目

---

有没有办法悬停单个项目和它的幻灯片像这样向上，但只有单个项目

使用

此

引用悬停卡

//卡悬停
$（'.card'）。悬停（函数（）{
$（this.toggleClass（'active'）；
$（this.find（'.bottom'）.slideToggle（）；
});
/**卡视图***/
.清单项目{
显示器：flex；
柔性流动：包裹；
证明内容：中心；
}
.列出项目.卡片{
宽度：18%；
利润率：10px；
背景：#262626；
位置：相对位置；
显示：块；
盒影：0px 1px 2px 0px rgba（0,0,0,0.15）；
过渡：0.4s线性；
}
.卡：悬停{
盒影：0px 1px 35px 0px rgba（0,0,0,0.3）；
}
.卡片.图像{
背景：黑色；
溢出：隐藏；
}
.卡.图像img{
身高：100%；
宽度：100%；
过渡：0.3s；
}
.card.active.图像img{
不透明度：0.6；
转换：比例（1.1）；
}
.卡片.内容{
位置：绝对位置；
边界：无；
底部：0px；
背景：#262626；
宽度：100%；
填充：10px；
}
.内容.标题{
字号：18px；
字号：600；
颜色：#ffffff；
}
.内容.类别{
颜色：#04e0b2；
字体大小：12px；
}
.内容.底部{
边缘顶部：5px；
}
.内容.底部按钮{
宽度：100%；
边界：无；
背景#04e0b2；
颜色：#ffffff；
字号：800；
填充：8px 0px；
过渡：0.3s；
光标：指针；
}
.content.底部按钮：悬停{
变换：比例（0.9）；
}
.内容.底部{
显示：无；
}

多利礁凸轮
家庭、动画、喜剧、冒险
玩
多利礁凸轮
家庭、动画、喜剧、冒险
玩
它的幻灯片只上一次！那就别再往上滑了！用简化的解决方案更新代码太棒了！非常感谢！：）乐意帮忙：）