javascript - JQuery:可点击div顶部的可点击元素

Question

我有一个可点击的 div，您可以在此处看到 http://jsfiddle.net/Sj575/277/

我的问题是，当 div 的可点击打开内容出现在它的顶部时(有点像网格)。 但是当我点击顶部的东西时，它确实会在 div 关闭时注册图像动画。

JQUERY (div)

$(function() {
    $(".ext").click(function() {
        $(".int").toggleClass("hidden");
        $(".ext").toggleClass("full");
        $("h1").toggleClass("hidden");
        $(".pe").toggleClass("show");
    });

    $(".int").click(function() {
        $(".ext").toggleClass("hidden");
        $(".int").toggleClass("full");
        $("h1").toggleClass("hidden");
        $(".pi").toggleClass("show");
    });
});

JQUERY(网格器)

jQuery(document).ready(function ($) {

    // Call Gridder
    $(".gridder").gridderExpander({
        scrollOffset: 60,
        scrollTo: "panel", // "panel" or "listitem"
        animationSpeed: 400,
        animationEasing: "easeInOutExpo",
        onStart: function () {
            console.log("Gridder Inititialized");
        },
        onExpanded: function (object) {
            console.log("Gridder Expanded");
            $(".carousel").carousel();
        },
        onChanged: function (object) {
            console.log("Gridder Changed");
        },
        onClosed: function () {
            console.log("Gridder Closed");
        }
    });
});

Answer 1

如果您希望点击事件仅在父 div 而不是其后代上触发，请尝试在 $(".ext") 和 $(".int") div 点击处理程序中使用以下比较:

if (e.target !== this)
    return;

工作示例，其中我添加了一个不会在点击时导致增长/隐藏动画的子按钮:http://jsfiddle.net/zxagqwvq/

所以你会有这样的东西:

$(function() {
    $(".ext").click(function(e) {

    if (e.target !== this)
        return;

    $(".int").toggleClass("hidden");
    $(".ext").toggleClass("full");
    $("h1").toggleClass("hidden");
    $(".pe").toggleClass("show");

    });

    $(".int").click(function(e) {

        if (e.target !== this)
            return;

        $(".ext").toggleClass("hidden");
        $(".int").toggleClass("full");
        $("h1").toggleClass("hidden");
        $(".pi").toggleClass("show");
     });
});