$('.q').click(function() { $('.display').toggleClass('none'); return false; }); 
 .q{ width: 100px; height: 100px; background: red; padding: 50px; } .w{ width: 100px; height: 100px; background: #eaeaea; } .display{ display:block; } .display.none{ display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="q"> div q <div class="w"> div w </div> </div> <div class="display"> 123 </div>

How to make, that at pushing on the child unit .w event did not play?

    1 answer 1

     $('.q').click(function(e) { if (e.target !== this) return false; $('.display').toggleClass('none'); }); 
     .q{ width: 100px; height: 100px; background: red; padding: 50px; } .w{ width: 100px; height: 100px; background: #eaeaea; } .display{ display:block; } .display.none{ display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="q"> div q <div class="w"> div w </div> </div> <div class="display"> 123 </div>