卡片描述中的链接应该指向该站点，但它会关闭描述

Question

我想在我的页面上使用code for the card，但我需要“阅读更多”链接才能转到另一个页面，而不是关闭卡的描述。不幸的是，我不擅长 jQuery。

$(document).ready(function() {
  var zindex = 10;

  $("div.card").click(function(e) {
    e.preventDefault();

    var isShowing = false;
    if ($(this).hasClass("show")) {
      isShowing = true
    }

    if ($("div.cards").hasClass("showing")) {
      // a card is already in view
      $("div.card.show").removeClass("show");

      if (isShowing) {
        // this card was showing - reset the grid
        $("div.cards").removeClass("showing");
      } else {
        // this card isn't showing - get in with it
        $(this).css({
          zIndex: zindex
        }).addClass("show");
      }
      zindex++;
    } else {
      // no cards in view
      $("div.cards").addClass("showing");
      $(this).css({
        zIndex: zindex
      }).addClass("show");
      zindex++;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">
  <div class="card">
    <img class="card__image" src="https://source.unsplash.com/300x225/?wave" alt="wave" />
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
        Card title
        <small>Image from unsplash.com</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc.
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="https://www.behance.net/gallery/72373861/BBDO-Ecuador" class="btn">Read more</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

首先删除 preventDefault()

 $("div.card").click(function(e){
    e.preventDefault(); <-- remove this line

并添加到按钮的链接

<a href="http://www.google.com" class="btn">Read more</a>