JQuery: anklickbare Elemente auf der klickbare div

Question

ich eine anklickbare div haben, wie Sie hier sehen http://jsfiddle.net/Sj575/277/

Mein Problem kann öffnet, ist, dass, wenn der offene Inhalt des div, die anklickbar erscheint oben drauf (Art wie ein Gridder). Aber wenn ich auf die Dinge oben klicke, registriert es die Bildanimation an der div schließt.

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

Wenn Sie möchten, dass ein Klickereignis nur auf das übergeordnete div und nicht auf die untergeordneten Elemente ausgelöst wird, verwenden Sie den folgenden Vergleich in den div-click-Handlern $ (". Ext") und $ (". Int"):

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

Arbeitsbeispiel, wobei ich ein Kind Schaltfläche hinzugefügt haben, die nicht die grow/auszublenden Animation auf Klick verursacht:

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

ich die Antwort aktualisiert, hoffe, das hilft.

Answer 3

Y: http://jsfiddle.net/zxagqwvq/

So Sie so etwas wie haben würde Sie können verhindern, dass ein Klickereignis weitergeht, indem Sie Folgendes verwenden: