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（gridder）

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而不是其后代，请尝试在$（＆＃34; .ext＆＃34;）和$（＆＃34; .int＆）中使用以下比较＃34;）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");
     });
});

Answer 2

p {
  overflow:hidden;
}

我更新了答案，希望这有帮助。

Answer 3

您可以使用以下命令阻止点击事件继续进行：

$(".ext").click(function(event) {
    ...
    event.stopPropagation(); //Event tree stops here. No parent elements will be notified of the event
});

JQuery：可点击div之上的可点击项目

3 个答案: