javascript - Why is this script only work on double click rather than single click? -

code:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready(function () {  $('.click1').click(function () {     $(".show1").fadein(400); });  $('body, .click1').click(function() {      $('.show1').hide();  }); }); </script> 

the script above works in order fadein needs clicked twice. how can change shows when clicked once?

for use case, can apply event listener body of document (in case, you're listening when click happens anywhere on page). once event occurs, can see clicked (evt.target) , there conditionally fire functions.

http://codepen.io/snypelife/pen/fcjiw

$(function () {        $('body').on('click', function (evt) {         if($(evt.target).hasclass('click')){           $('.show').toggle('fade');         } else {           $('.show').fadeout();         }       });  });