Javascript 我正在努力使卡片只在div.card-title上打开，而不是在hole div.card上打开（CodePen Home 3D折叠展示）

我在codepen.io上发现了这张3d卡，我试图让它只有在按下

div.card-title

时才会打开，而不是在按下孔

div.card

时，尤其是打开时的小内容部分不应该被点击

如果您能帮助我，我将不胜感激，如果您能只显示您更改的代码，以便我在我的项目中更容易更改。

如果您添加

if ( !e.target.classList.contains('btn') ) return;

---

单击之后，单击任何其他位置都不会产生任何效果。

我已在代码中的编辑位置添加了注释

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

    $("div.card-title").click(function (e) { //Put the click listner on the .card-title instead of .card
        e.preventDefault();

        var isShowing = false;
        var $element = $(this).parent(".card"); //Get the .card element of the clicked title
        if ($element.hasClass("show")) { //Changed $(this) to $element so it uses the correct element
            isShowing = true
        }

        if ($("div.cards").hasClass("showing")) {
            $("div.card.show")
                .removeClass("show");

            if (isShowing) {
                $("div.cards")
                    .removeClass("showing");
            } else {
                $element //Changed $(this) to $element so it uses the correct element
                    .css({ zIndex: zindex })
                    .addClass("show");

            }

            zindex++;

        } else {
            $("div.cards")
                .addClass("showing");
            $element //Changed $(this) to $element so it uses the correct element
                .css({ zIndex: zindex })
                .addClass("show");

            zindex++;
        }

    });
});

---

这是javascript中一个典型的“This”问题。当用户单击该卡时，“this”被引用到该卡，因此您不能简单地将单击目标更改为按钮，因为它将更改“this”的上下文

您可以将事件侦听器更改为按钮，并使用jquery的“parents”方法设置变量，查找最近的卡，然后在不改变太多功能的情况下重新配置该方法

$("div.card .toggle-info").click(function(e){

---

这实际上是一个非常聪明的快速解决方案，我没有想到这一点！