Menu accordéon - garder catégorie ouverte

**yozart** · 31/05/2009, 15h13

Bonjour a tous,

J'ai trouvé sur ce site un script de menu en accordéon. Il est quasi parfait si ce n'est que j'aimerais pouvoir garder une catégorie ouverte.

Voici le code de la page:

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			#menuAcc li{
				border:1px solid #666;
				width:150px;
				height:13px;
				overflow:hidden;
				padding:0px;
			}
			#menuAcc li h6{
				padding:0px;
				margin:0px;
			}
		</style>
		<script type="text/javascript">
			var ulCurrent = null;
			var animTimerOpen = null;
			var animTimerClose = null;
			var quotient = 0.2;
			var isOpen = null;
			var IsMinHeight = true;
 
			function openMenu(element){
				ulCurrent = element.parentNode;
				var heightLink = element.offsetHeight;
				var heightDiv = element.parentNode.getElementsByTagName('div')[0].offsetHeight;
				animTimerOpen = setInterval(function(){
					Expand(heightDiv+heightLink,heightLink)
					}, 25);
				}
 
 
			function Expand(MaxHeight,minHeight){
				var IsMaxHeight = false;
				if(parseInt(ulCurrent.offsetHeight)< MaxHeight){
					ulCurrent.style.height = parseInt(ulCurrent.offsetHeight) + 5 + 'px'; 
				}
				else if(!IsMaxHeight){
					IsMaxHeight = true;
				}
 
				if (isOpen != null) {
					if (parseInt(isOpen.offsetHeight) > minHeight) {
						IsMinHeight = false;
						isOpen.style.height = parseInt(isOpen.offsetHeight) - 9 + 'px';
					}
					else 
						if (!IsMinHeight) {
							IsMinHeight = true;
					}
				}
				if(IsMaxHeight && IsMinHeight){
					clearInterval(animTimerOpen);
					ulCurrent.style.height = MaxHeight + "px";
					if (isOpen != null) {
						isOpen.style.height = minHeight + 2 + "px";
					}
					isOpen = ulCurrent;
					quotient = 0.2 ;
				}
			}
		</script>
	</head>
	<body>
		<ul id="menuAcc">
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
 
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>
			<li><h6 onclick="openMenu(this);">menu 1</h6>
				<div>et la tout le contenu <br />
	  				 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
					 et la tout le contenu <br />
				</div>
			</li>			
		</ul>
	</body>
</html>

J'ai essayé en ajoutant un ID dans les balises h6 puis en faisant l'appel suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script language="javascript">
openMenu(document.getElementByID(idPartie));
</script>;

mais cela ne fonctionne pas. Quelqu'un saurait il comment faire svp?

Merci a tous

**olivierPa** · 01/06/2009, 01h47

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
window.addEventListener(
     "load",
      function (){
	    openMenu(document.getElementById("idPartie"));
      },
      false);

et voila...

olivier.

**yozart** · 01/06/2009, 10h25

Merci beaucoup pour ton aide. Je ne connaissais pas cette fonction. je vais l'essayer de suite ^^.

EDIT: ca marche pafaitement. mille fois merci a toi ôh grand maitre du javascript.

**Bovino** · 01/06/2009, 12h08

Attention... addEventListener n'est pas cross-browser, pour IE, il faut passer par attachEvent !

**olivierPa** · 01/06/2009, 12h16

Ah... IE, il ne peut jamais rien faire comme tout le monde !
Merci pour la precision (en general j'utilise plus .onload=...), mais je voulais proposer une solution "propre". C'etait compter sans IE...

**yozart** · 11/06/2009, 22h32

Bon, désolé de rouvrir le post mais en fait, un petit bug subsiste dans le script. lorsqu'on clic plusieurs fois sur une categorie, les autres se referment plus vite et des elements des categories restent cachés lors de l'ouverture d'une categorie. Ce qui est assez génant. Je ne trouve pas d'ou viens le problème malheureusement....

voici le code js utilisé:

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
var ulCurrent = null;
var animTimerOpen = null;
var animTimerClose = null;
var quotient = 0.2;
var isOpen = null;
var IsMinHeight = true;
 
function openMenu(element){
	ulCurrent = element.parentNode;
	var heightLink = element.offsetHeight;
	var heightDiv = element.parentNode.getElementsByTagName('div')[0].offsetHeight;
	animTimerOpen = setInterval(function(){
		Expand(heightDiv+heightLink+5,heightLink)
		}, 25);
	}
 
 
function Expand(MaxHeight,minHeight){
	var IsMaxHeight = false;
	if(parseInt(ulCurrent.offsetHeight)< MaxHeight){
		ulCurrent.style.height = parseInt(ulCurrent.offsetHeight) + 5 + 'px'; 
	}
	else if(!IsMaxHeight){
		IsMaxHeight = true;
	}
 
	if (isOpen != null) {
		if (parseInt(isOpen.offsetHeight) > minHeight) {
			IsMinHeight = false;
			isOpen.style.height = parseInt(isOpen.offsetHeight) - 5 + 'px';
		}
		else 
			if (!IsMinHeight) {
				IsMinHeight = true;
		}
	}
	if(IsMaxHeight && IsMinHeight){
		clearInterval(animTimerOpen);
		ulCurrent.style.height = MaxHeight + "px";
		if (isOpen != null) {
			isOpen.style.height = minHeight + 2 + "px";
		}
		isOpen = ulCurrent;
		quotient = 0.2 ;
	}
}

Menu accordéon - garder catégorie ouverte

JavaScript

Vue hybride

Discussions similaires

Partager

Partager