11540 sujets

JavaScript, DOM et API Web HTML5

Fermeture de div et changement de class avec click sur body

Bonjour,

J'ai une div qui s'ouvre avec un bouton, le bouton a 2 class (link - link_active) je cherche a pouvoir fermer la div en click sur body, non sur ma div et changer la class !

Sur mon code je réussi à changer les class mais si je click sur ma div elle se ferme, j’essaie avec :not mais pas de succès. J'arrive pas à trouver l'ensemble de deux functions.

SVP_Merci !


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>TEST</title>
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<style>
	body{background:#1E1E1E;}
	.link{background:gray;color:black;}
	.link_active{background:green;color:white;}
	#content{background:gray;border:1px solid;width:100px;height:100px;display:none;}
</style>
<script type="text/javascript">
$(document).ready(function () {

 $(".link").click(function (e) {        
    $(this).next("#content").slideToggle("fast");
    $(this).toggleClass("link_active");
    $(this).removeClass("active");
    e.stopPropagation();
 });
 $(document).on('click', function () {
    $('#content').css("display", "none");
    $('.link').removeClass("link_active");
    $('.link').addClass("link");
 });
});
</script>
<body>
	<a href="#" class="link">OPEN</a>
	<div id="content"> content content content content content content</div>
</body>
</html>
Bonjour,

Si je comprends bien tu souhaiterais que ton div que tu as ouvert via le click sur le bouton se ferme lorsque tu cliques ailleurs que sur le div en question ?

Si c'est cela il faut que tu bind le click sur ta fenetre et que au click tu regarde quel est l'élément en dessous de la souris.

Si cet élément est ton div tu ne fais rien, si c'est autre chose alors tu fermes le div en question.

Pour récupérer l'élément sur lequel tu as cliqué utilises cela :
 var $element = $(e.srcElement ?  e.srcElement : e.target);


il faut bien sûr que la variable "e" soit un argument de ta closure de l'évènement "click", les valeurs seront automatiquement bindées dessus.

 $(document).click(function(e){    	      
        var $element = $(e.srcElement ?  e.srcElement : e.target);
        console.log("Un clic a été fait sur %o",$element);        
    });


PS : pour voir les console.log il faut bien sûr utiliser la console de firebug
http://getfirebug.com/logging
Modifié par Elmsroth (21 Jan 2013 - 13:07)
Sujet clos
Aller à