Bootstrap 4关闭先前单击的翻转卡片

Question

我有一个包含多张卡片的卡片容器，当我点击一张卡片时，它会翻转以显示背面。当我点击另一张卡片时，我希望之前点击的卡片关闭。我的代码似乎不起作用。我尝试了许多 Jquery 和 JavaScript 变体，但均无济于事。

它可以在悬停时使用，但我不想在悬停时使用它，我想点击它，然后当我点击另一张卡片时它必须关闭。

目前，当我点击一张卡片时，它会翻转并在我点击另一张卡片时保持翻转状态。

有什么建议吗？

这是一个小提琴：https://jsfiddle.net/hmt8n6x5/1/

HTML

<div class="row whole-shop-container shop-body show-products prod-content clearfix card-container">
  <div class="col-lg-6 col-md-6 col-sm-6 product-item">
      <div class="card card-flip h-100">
          <div class="card-front">
              <div class="card-body">
                  <div class="details shop-list-container">
                      <div class="shop-list">
                          <div class="shop-container">
                              <p>An image will be here</p>
                          </div>
                          <h4>Product Name 1</h4>
                          <button class="btn btn-outline-secondary">View Details</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="card-back bg-white">
              <div class="card-body">
                  <div class="product-detail-inner">
                      <h3 class="products-text product-name"><span>Product Name 1</span></h3>
                      <p class="products-text product-price">Product price: <span>$200</span></p>
                      <p class="products-text stock">Is there stock? <span>Yes, there are 4 left</span></p>
                      <p class="products-text product-description">Product Description: <span>Product 1 description</span></p>
                      <button class="addToCart btn btn-outline-secondary">Add to cart</button>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 product-item">
    <div class="card card-flip h-100">
        <div class="card-front">
            <div class="card-body">
                <div class="details shop-list-container">
                    <div class="shop-list">
                        <div class="shop-container">
                            <p>An image will be here</p>
                        </div>
                        <h4>Product Name 2</h4>
                        <button class="btn btn-outline-secondary">View Details</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-back bg-white">
            <div class="card-body">
                <div class="product-detail-inner">
                    <h3 class="products-text product-name"><span>Product Name 2</span></h3>
                    <p class="products-text product-price">Product price: <span>$300</span></p>
                    <p class="products-text stock">Is there stock? <span>Yes, there are 3 left</span></p>
                    <p class="products-text product-description">Product Description: <span>Product 2 description</span></p>
                    <button class="addToTrunk btn btn-outline-secondary">Add to cart</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

CSS

.card {
    background-color: transparent;
    border: 0;
}

/*
flip card
*/
.card-flip > div {
    backface-visibility: hidden;
    transition: transform 600ms;
    transition-timing-function: ease-out;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
}
  
.card-front {
    transform: rotateY(0deg);
}

.card-back {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
}

.flipped {
    transform: rotateY(0deg);
}

/* .card-flip:hover .card-front {
    transform: rotateY(-180deg);
}

.card-flip:hover .card-back {
    transform: rotateY(0deg);
} */

const card = document.querySelectorAll('.card');
const front = document.querySelectorAll('.card-flip .card-front');
const back = document.querySelectorAll('.card-flip .card-back');
const cardContainer = document.querySelectorAll('.card-container');

for (let i = 0; i < card.length; i++) {
    card[i].addEventListener('click', function() {
        $('.card').removeClass('flipped');
        if (back[i].classList.contains('flipped')) {
            back[i].classList.remove('flipped');
            front[i].style.transform = "rotateY(-180deg)";
        } else {
            back[i].classList.add('flipped');
            front[i].style.transform = "rotateY(0deg)";

        }
    });
} 

Answer 1

把你的JS改成这样：

$('.card .btn').click((element) => {
    $('.card').removeClass('active')
    $(element.target).parents('.card.card-flip').addClass('active')
})

将其添加到您的 CSS 中：

.card-flip.active .card-front {
  transform: rotateY(-180deg);
}

.card-flip.active .card-back {
  transform: rotateY(0deg);
}