如何获取链接以使用 JavaScript-Generated Z-index

Question

我正在重新调整 codepen 的用途，我有运行一个问题，下拉框中的 link 由于 [=42 生成的 z-index 而无法正常工作=].原笔中的代码也不起作用。

我了解 z-index，但在这种情况下，jQuery 代码将 z-index 10 应用于呈现其后方 link 的包含元素。每次框可见时 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 引用只是为了看看我是否能让 link 工作

3) 将 link (.card-description a) 上的 z-index 更改为比所有其他 z-indexes

更高的数字

4) 阅读 Whosebug 上的所有 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++;
      }

    });
  });
});

我在控制台中没有看到任何错误消息。为简单起见，我已将所有 link 更改为指向 Google。 link 似乎可以点击，但当我点击它时——框会折叠，但我没有被带到所需的 URL。

Answer 1

试试这个：

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

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

不确定为什么它没有被注释甚至在那里...也许它是为了原始示例而没有使用 url 或者可能是我遗漏的其他东西...

Answer 2

我投票支持 Osvaldo，因为他的 post 让我调查了 prevenDefault() 直到我发现了 stopPropagation()。他的评论帮助我解决了这个问题。

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

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

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

如何获取链接以使用 JavaScript-Generated Z-index

How to Get Links to Work with JavaScript-Generated Z-index

css

jquery

z-index

hyperlink