Nascondi un DIV quando l’utente fa clic all’esterno di esso utilizzando jQuery

Sto usando questo codice:

$(document).ready(function(){ $(".SlideDiv").hide(); $(".Show_hide").show(); $('.Show_hide').click(function(){ $(".SlideDiv").slideToggle(); }); }); 

E questo HTML:

  Show/hide 
this is content page google

E questo CSS:

 .SlideDiv { height:200px; background-color:gray; margin-top:10px; } .Show_hide { display:none; } 

Il problema è che ho dei collegamenti all’interno del DIV e quando cliccano su quel link aperto ma la funzione show non viene nascosta.

dimostrazione

DEMO

Non è necessario utilizzare alcun plugin per questo. Hai solo bisogno di associare ogni clic del documento a una funzione e controllare se il clic era su un object non è uno dei collegamenti funzionali. event.stopPropagation() viene utilizzato per impedire il bubbling degli eventi.

 $(document).ready(function(){ $(document).on('click',function(e){ if( !$(e.target).is('.Show_hide, .SlideDiv') || !$(e.target).parents('.Show_hide, .SlideDiv').length == 0){ $(".SlideDiv").slideUp(); e.stopPropagation(); } }); $(".SlideDiv").hide(); $(".Show_hide").show(); $('.Show_hide').click(function(){ $(".SlideDiv").slideToggle(); }); }); 
  Show/hide 
this is content page google

puoi farlo con un js “mousedownoutside.js” usando il seguente codice

http://benalman.com/projects/jquery-outside-events-plugin/

  $('yourDiv').on('mousedownoutside', function(event){ var target = $( event.target ); if($(this) != target){ $(this).slideUp(); } });