我试图让它只在 div.card-title 而不是孔 div.card 上打开（CodePen Home 3D Fold out reveal）

Question

我发现这张 3d 卡片在 codepen.io This Link 上折叠，我试图做到这一点，只有当你按下 div.card-title 时它才会打开，而不是当你按下漏洞 div.card 特别是打开时的小内容部分不应该是可点击的。

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

Answer 1

如果你添加...

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

preventDefault following click 之后，点击其他任何地方都不会生效。

Answer 2

我在代码中对我编辑过的地方添加了注释

$(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++;
        }

    });
});

Answer 3

这是 javascript 中的经典 'this' 问题。当用户点击卡片时，'this' 是对卡片的引用，所以不能简单地将点击目标更改为按钮，因为它会改变 'this'.[=12= 的上下文]

您将事件侦听器更改为按钮，并使用 jquery 的 'parents' 方法设置一个变量，找到最近的卡片 - 并重新配置该方法而不更改太多功能。

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

https://codepen.io/JoeCoulam/pen/eYJLjqJ?editors=1111

我试图让它只在 div.card-title 而不是孔 div.card 上打开（CodePen Home 3D Fold out reveal）

Im trying to make it so the card only opens on the div.card-title instead of the hole div.card (CodePen Home 3D Fold out reveal)

html

javascript

css

jquery

codepen