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

Question

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

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

HTML 和 CSS 在 Codepens 中：

1) 原 Codepen：https://codepen.io/candroo/pen/wKEwRL

2) 我的 Codepen：https://codepen.io/Rburrage/pen/PooGKoM?editors=1100

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

这是我尝试过的：

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

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

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

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

试试这个：

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

该行处于活动状态，如果您将其删除或像我的示例中那样对其进行评论，它应该使 url 工作。

不知道为什么它没有注释或什至在那里......也许它是为了原始示例而没有 url 工作或者可能是我缺少的其他东西......

Answer 2

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

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

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

这解决了这个问题。谢谢大家！