Ссылка внутри описания карты должна вести на сайт, но закрывает описание - PullRequest
Новая
       23

Ссылка внутри описания карты должна вести на сайт, но закрывает описание

0 голосов
/ 14 января 2020

На карточке есть код , который я хочу использовать на своей странице, но мне нужна ссылка «Читать дальше», чтобы перейти на другую страницу и не закрывать описание карточки. К сожалению, я не силен в 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>

1 Ответ

0 голосов
/ 14 января 2020

сначала удалите warnDefault () 

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

и добавьте ссылку на кнопку 

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