jquery - 如何获取链接以使用 JavaScript 生成的 Z-index

Question

我正在重新调整 codepen 的用途，但由于 jQuery 生成的 z-index，我遇到了下拉框内的链接无法正常工作的问题。原笔中的代码也不起作用。

我了解 z-index，但在这种情况下，jQuery 代码将 z-index 10 应用于呈现其后面链接的包含元素。每次框可见时，jQuery 也会迭代 z-index(参见代码部分)。

HTML 和 CSS 在代码笔中:

1) 原始代码笔:https://codepen.io/candroo/pen/wKEwRL

2) 我的代码笔:https://codepen.io/Rburrage/pen/PooGKoM?editors=1100

我需要这方面的帮助，拜托...谢谢。我觉得我忽略了一些非常简单的事情。

这是我尝试过的:

1) 删除 jQuery z-index 并用 CSS 添加它

2) 删除所有 jQuery z-index 引用只是为了看看我是否可以获得工作链接

3) 将链接 (.card-description a) 上的 z-index 更改为比所有其他 z-index 更高的数字

4) 阅读 StackOverflow 上的所有 z-index 问题，看看我是否能弄明白

$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。

Answer 1

我投票赞成 Osvaldo，因为他的帖子让我调查了 prevenDefault()，以至于我发现了 stopPropagation()。他的评论帮助我解决了这个问题。

我需要另一个函数来定位框内的链接 (.card-description) 并对其调用 stopPropagation。

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

这解决了问题。谢谢大家!