单击父级时仅滑动切换

Question

I'm having some problems with the slideToggle in JavaScript. I have a class called .reveal and when I click on it, I want the class Window to appear. However, I only want the slideToggle to work when I click on the parent class .reveal and not when I click inside the class .Window.. If I have a button inside my .Window class fx. the slidetoggle would kick in when I click it:

<div class="reveal">
Reveal
   <div class="Window">
       <input type="button" id="Create" value="CLICK" />
   </div>
</div>

$(function () {
   $('.reveal').click(function() {
       $(this).children('.Window').slideToggle();
   });
});

How do I make the slideToggle only work when I click the parent class?

Answer 1

With your current html structure , that is how it is supposed to happen, clicking on .Window will bubble up to .reveal s click event since it is the parent, so either you need to stopPropagation() by subscribing to a click event on the .Window or check for the intented target alone in the existing click event, thus avoid another event registry. Instead try this:

$(function () {
   $('.reveal').click(function(e) {
       if(e.target == this) //check if target is .reveal only if so trigger else ignore.
         $(this).children('.Window').slideToggle();
   });
});

Fiddle