Как получить ссылки для работы с созданным JavaScript Z-index - PullRequest
Новая
       11

Как получить ссылки для работы с созданным JavaScript Z-index

0 голосов
/ 17 октября 2019

Я повторно использую кодовую ручку, и я столкнулся с проблемой, из-за которой ссылки внутри раскрывающихся списков не работают из-за z-индекса, генерируемого jQuery. Код в оригинальной ручке также не работает.

Я понимаю z-index, но в этом случае код jQuery применяет z-index 10 к содержащему элементу, который отображает ссылку позади него. JQuery также выполняет итерацию z-индекса каждый раз, когда окно становится видимым (см. Раздел кода).

HTML и CSS находятся в Codepens:

1) Оригинальный Codepen: https://codepen.io/candroo/pen/wKEwRL

2) Мой Codepen: https://codepen.io/Rburrage/pen/PooGKoM?editors=1100

Мне нужна помощь в этом, пожалуйста ... и спасибо. Я чувствую, что пропускаю что-то очень простое.

Вот что я пробовал:

1) удаление z-индекса jQuery и добавление его вместо CSS

2) удаление всех ссылок z-индекса jQuery просто для просмотраесли я смогу получить ссылки на работу

3) изменив z-index на ссылке (.card-description a) на большее число, чем все другие z-index

4), прочитав всеПроблемы с z-index в StackOverflow, чтобы посмотреть, смогу ли я это выяснить 


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

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

      var isShowing = false;

      if ($jq(this).hasClass("show")) {
        isShowing = true
      }

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

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

        }

        zindex++;

      } else {
        // no cards in view
        $jq("div.cards")
          .addClass("showing");
        $jq(this)
          .css({ zIndex: zindex })
          .addClass("show");

        zindex++;
      }

    });
  });
});

Я не вижу сообщений об ошибках в консоли. Для простоты я изменил все ссылки, чтобы указать на Google. Ссылка кажется кликабельной, но когда я щелкаю по ней, окно сворачивается, но я не перехожу на нужный URL.

Ответы [ 2 ]

1 голос
/ 18 октября 2019

Я голосую за Освальдо, потому что его пост заставил меня исследовать предотвратимую защиту () до точки, где я обнаружил stopPropagation (). Его комментарий помог мне решить проблему.

Мне нужна была другая функция, чтобы нацелить ссылку внутри поля (.card-description) и вызвать на ней stopPropagation. 

$jq(".card-description a").click(function (e) {
  e.stopPropagation();
});

Это решило проблему. Спасибо всем!

0 голосов
/ 17 октября 2019

Попробуйте: 

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

Эта строка активна, и если вы удалите ее или прокомментируете, как в моем примере, она должна заставить работать URL-адреса.

Не знаю, почему она не закомментированаили даже там ... может быть, это было предназначено для исходного примера, где не работают URL-адреса, или может быть что-то еще, что я пропускаю ...

...