Bonjour,
J'ai récupéré un bout de code JavaScript pour avoir une Div glissante (déroulante).
Le problème c'est que cette div reste déroulée même si on click à l'extérieur de ses bornes.
J'ai essayé de modifier un peu le code pour qu'elle se referme, mais je n'ai pas réussi.
Est ce que quelqu'un connaît comment on peu faire?
Voilà mon Code, Merci pour votre aide.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<html>
<head>
	<title>slide test</title>	
	<style type="text/css">
	.div_contentBox{
		border:1px solid #317082;
		height:0px;
		visibility:hidden;
		position:absolute;
		background-color:#E2EBED;
		overflow:hidden;
		padding:2px;
		width:200px;
 
	}
	.div_content{
		position:relative;		
		width:100%;
	}
	</style>
 
	<script type="text/javascript">	
	var slideDownInitHeight = new Array();
	var slidedown_direction = new Array();
	var slidedownActive = false;
	var contentHeight = false;
	var slidedownSpeed = 3; 
	var slidedownTimer = 20;
	function slidedown_showHide(boxId)
	{
		if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
		if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;	
		if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
		slidedownContentBox = document.getElementById(boxId);
		var subDivs = slidedownContentBox.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='div_content')slidedownContent = subDivs[no];	
		}
		contentHeight = slidedownContent.offsetHeight;
		slidedownContentBox.style.visibility='visible';
		slidedownActive = true;
		slidedown_showHide_start(slidedownContentBox,slidedownContent);
		// ajouter pour fermeture après click extérieur
		var target = (e && e.target) || (event && event.srcElement) ;
		if ( target != slidedownContentBox ) {
			slidedown_showHide_start(slidedownContentBox,slidedownContent) ;
		}
	}
	function slidedown_showHide_start(slidedownContentBox,slidedownContent)
	{
		if(!slidedownActive)return;
		slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
		if(slideDownInitHeight[slidedownContentBox.id] <= 0){
			slidedownActive = false;	
			slidedownContentBox.style.visibility='hidden';
			slideDownInitHeight[slidedownContentBox.id] = 0;
		}
		if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
			slidedownActive = false;	
		}
		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';
		setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);
	}
 
	function setSlideDownSpeed(newSpeed)
	{
		slidedownSpeed = newSpeed;	
	}
 
	document.onclick=check;
/*	function check(e){
		var obj = document.getElementById('box2');
		if(obj.style.visibility=='visible' ){
				var target = (e && e.target) || (event && event.srcElement);
				if(target!=obj) {					
					slidedown_showHide('box2') ;
				}
		}
	} */
	</script>	
	</head>
	<body>
	<div>
	<div id="controleur"><a href="#" onclick="slidedown_showHide('box1');return false;">Essayer</a></div>
	<div class="div_contentBox" id="box1">
		<div class="div_content" id="subBox1">
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
		</div>
	</div>
</div>
<div>