11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Affichage du premier élément "dd" d'une liste &quo

Bonjour,

Je cherche à afficher une liste "dl" et que seul le premier élément "dd" soit affiché. Au clic sur l'élément "dt" tous les éléments "dd" sont affichés normalement.

Je pense qu'il faut utiliser la méthode :


document.getElementsByTagName("dl");


Connaissez vous une fonction qui permette de faire ça ?
Modifié par EricLB (11 Aug 2006 - 10:03)
salut,

Si j'ai bien compris ce que tu veux, tu peux essayer ça

xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>

<script type="text/javascript" src="definition.js"></script>

</head>
<body>
<div style="text-align:center;padding:30px;">
<dl>
  <dt>Premier terme</dt>
  <dd>Définition du premier terme.</dd>
  <dt>Second terme</dt>
  <dd>Définition du second terme.</dd>
  <dt>Troisieme terme</dt>
  <dd>Définition du troisieme terme.</dd>
</dl>
</div>
</body>
</html>


et le js correspondant

function prepareDef() {    
	if (!document.getElementsByTagName) return false;
    var dls = document.getElementsByTagName("DL");    
    for (var i=0;i<dls.length;i++) {
		var dds = document.getElementsByTagName("DD");
		for (var j=0;j<dds.length;j++) {
			if (j!=0) dds[j].style.display = "none";
		}
        var dts = document.getElementsByTagName("DT");
		for (var j=0;j<dts.length;j++) {
			if (j!=0) dts[j].style.display = "none";
			else {
				dts[j].onclick = function () {
								for (var i=0;i<this.parentNode.childNodes.length;i++) {
									if (this.parentNode.childNodes[i].nodeType == 1)
										this.parentNode.childNodes[i].style.display = "block";
								}
				}
			}
		}
    }
}
window.onload = prepareDef;


dis moi si c ok

a+[/i][/i]
Modifié par dunjl (24 Jul 2006 - 19:46)
Bonjour dunjl, merci de t'être penché sur ce cas.

ça se rapproche de ce que je souhaite faire, mais ce n'est pas exactement ça. Je souhaiterais avoir comme résultat :


<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>...</title>

<script type="text/javascript" src="definition.js"></script></head><body>
<div style="padding: 30px; text-align: center;">
<dl>
  <dt>Premier terme a</dt>
  <dd>Définition du premier terme a.</dd>
  <dd style="display: none;">Définition du second terme a.</dd>
  <dd style="display: none;">Définition du troisieme terme a.</dd>
</dl>
<dl>
  <dt>Premier terme b</dt>
  <dd>Définition du premier terme b.</dd>
  <dd style="display: none;">Définition du second terme b.</dd>
  <dd style="display: none;">Définition du troisieme terme b.</dd>
</dl>
</div>
</body></html>


C'est à dire pour chaque liste de diffusion, avoir le titre et le premier élément.

Lorsque je clique sur le titre d'une des listes le résultat serait, par exemple pour la première liste :


<dl>
  <dt>Premier terme a</dt>
  <dd>Définition du premier terme a.</dd>
  <dd>Définition du second terme a.</dd>
  <dd>Définition du troisieme terme a.</dd>
</dl>


Tous les "dd" s'affichent et plus uniquement le premier.

Dans ton code tu mets un "onclick", mais celui-ci ne provoque aucun évènement...
Modifié par EricLB (25 Jul 2006 - 10:13)
salut

ok, comme je n'avais pas la structure de ton doc, j'ai improvisé!

donc voila :
xhtml

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>...</title>
<script type="text/javascript" src="definition.js"></script></head><body>
<div style="padding: 30px; text-align: center;">
<dl>
  <dt>Premier terme a</dt>
  <dd>Définition du premier terme a.</dd>
  <dd>Définition du second terme a.</dd>
  <dd>Définition du troisieme terme a.</dd>
</dl>
<dl>
  <dt>Premier terme b</dt>
  <dd>Définition du premier terme b.</dd>
  <dd>Définition du second terme b.</dd>
  <dd>Définition du troisieme terme b.</dd>
</dl>
</div>
</body></html>


tu noteras que j'ai supprimé les display:none que tu avais mis, en effet il vaut mieux gerer ce comportement dans le script, ainsi l'utilisateur qui n'a pas activé Javascript peut voir tout de même les definitions.

voila le js:

function prepareDef() {    

	if (!document.getElementsByTagName) return false;
    var dls = document.getElementsByTagName("DL");
    for (var i=0;i<dls.length;i++) {
		var dds = dls[i].getElementsByTagName("DD");
		for (var j=0;j<dds.length;j++) {
			if (j!=0) dds[j].style.display = "none";
		}

        var dts = dls[i].getElementsByTagName("DT");
		dts[0].onclick = function () {								
								for (var i=0;i<this.parentNode.childNodes.length;i++) {
									if (this.parentNode.childNodes[i].nodeType == 1) {
										this.parentNode.childNodes[i].style.display = "block";
									}
								}
		}		
    }
}

window.onload = prepareDef;


j'espère que ca correspond à ce que tu voulais

a+[/i][/i][/i][/i]
J'ai testé ton script, mais il ne se passe rien...

La page xhtml s'affiche sans modification, aucun événement si on clique sur "dt".

Pour les display:none - il s'agissait du "code généré" par javascript pour que ce soit plus clair pour l'effet que je cherche çà obtenir.
Modifié par EricLB (25 Jul 2006 - 12:10)
CODE HTML :


<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>...</title>
<script type="text/javascript" src="definition.js"></script></head><body>
<div style="padding: 30px; text-align: center;">
<dl>
  <dt>Premier terme a</dt>
  <dd>Définition du premier terme a.</dd>
  <dd>Définition du second terme a.</dd>
  <dd>Définition du troisieme terme a.</dd>
</dl>
<dl>
  <dt>Premier terme b</dt>
  <dd>Définition du premier terme b.</dd>
  <dd>Définition du second terme b.</dd>
  <dd>Définition du troisieme terme b.</dd>
</dl>
</div>
</body></html>


JAVASCRIPT (que j'ai appelé definition.js)

function prepareDef() {    
	if (!document.getElementsByTagName) return false;
    var dls = document.getElementsByTagName("DL");
    for (var i=0;i<dls.length;i++) {
		var dds = dls.getElementsByTagName("DD");
		for (var j=0;j<dds.length;j++) {
			if (j!=0) dds[j].style.display = "none";
		}
        var dts = dls[i].getElementsByTagName("DT");
		dts[0].onclick = function () {								
								for (var i=0;i<this.parentNode.childNodes.length;i++) {
									if (this.parentNode.childNodes[i].nodeType == 1) {
										this.parentNode.childNodes[i].style.display = "block";
									}
								}
		}		
    }
}
window.onload = prepareDef;


Je ne pense pas qu'il y ait une différence avec le code que tu as posté...[/i][/i][/i]
Modifié par EricLB (25 Jul 2006 - 14:06)
en fait si, il y en a 2

var dds = dls.getElementsByTagName("DD");


est en fait
var dds = dls[ i ].getElementsByTagName("DD");


et
var dts = dls.getElementsByTagName("DT");

est en fait
var dts = dls[ i ].getElementsByTagName("DT");


a+
il y a eu incompréhension car avec la mise en forme du forum le terme
[ i ] sans espace est interprété comme italique
Smiley biggrin

la prochaine fois j'utiliserai 'index' au lieu de 'i' !!
Modifié par dunjl (25 Jul 2006 - 14:22)
ok ! Smiley biggrin

Je comprends mieux pourquoi ça marchait pas... En copiant-collant le code ç a m'a fait la même chose !

En tout cas merci pour la démo, je vais étudier ça de près !
Bonjour,

J'ai modifié ton code pour avoir l'effet menu déplié/replié (état on et état off) quand on clique sur dt.

J'ai ajouté également une image de background (flèche-on et flèche-off)
Mais j'ai été obligé de mettre cette image de bg sur la balise <dl>, qu'est-ce qu'il faudrait changer dans le code pour que l'image soit en bg de <dt> ?

this.parentNode, c'est <dl>
this.parentNode.childNodes c'est <dd>
Théoriquement <dt> ça devrait être this.parentNode.childNodes[0], non ? 



function prepareDef() {    
	if (!document.getElementsByTagName) return false;
    var dls = document.getElementsByTagName("DL");
    for (var i=0;i<dls.length;i++) {
      dls[i].style.backgroundImage = "url(images/news-arrow-off.png)";
			dls[i].style.backgroundRepeat = "no-repeat";
			dls[i].style.backgroundPosition="3px 6px";
		var dds = dls[i].getElementsByTagName("DD");
		for (var j=0;j<dds.length;j++) {
			if (j!=0) dds[j].style.display = "none";
		}
        var dts = dls[i].getElementsByTagName("DT");
		dts[0].onclick = function () {								
								for (var i=0;i<this.parentNode.childNodes.length;i++) {
									if ((this.parentNode.childNodes[i].nodeType == 1) && (this.parentNode.childNodes[i].style.display=="none" )) {
										this.parentNode.childNodes[i].style.display = "block";
										this.parentNode.style.backgroundImage = "url(images/news-arrow-on.png)";
										this.parentNode.style.backgroundRepeat = "no-repeat";
										this.parentNode.style.backgroundPosition="3px 6px";
									}
									else if ((this.parentNode.childNodes[i].nodeType == 1) && (this.parentNode.childNodes[i].style.display=="block" )) {
										this.parentNode.childNodes[i].style.display = "none";
										this.parentNode.style.backgroundImage = "url(images/news-arrow-off.png)";
										this.parentNode.style.backgroundRepeat = "no-repeat";
										this.parentNode.style.backgroundPosition="3px 6px";
									}
								}
		}		
    }
}
window.onload = prepareDef;
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Bonjour,

EricLB a écrit :
Je cherche à afficher une liste "dl" et que seul le premier élément "dd" soit affiché. Au clic sur l'élément "dt" tous les éléments "dd" sont affichés normalement.


N'oubliez qu'une partie de la population n'a pas de souris et ne pourra pas faire "clic" : pensez donc également au focus dans le script, svp Smiley cligne
a écrit :
this.parentNode, c'est <dl>
this.parentNode.childNodes c'est <dd>
Théoriquement <dt> ça devrait être this.parentNode.childNodes[0], non ?


en fait ça l'est pour IE mais pas pour FF ou Moz. C'est pour ça que j'avais ajouté ce test :
if (this.parentNode.childNodes[ i ].nodeType == 1)


si tu regardes l'arbre DOM dans FF, il y a un noeud text entre le dl et le dt
Administrateur
Bonjour,

comme expliqué dans le sujet d'annonce, [ i] (sans espace) est interprété comme mise en italique: index aurait convenu comme précisé par dunjl ou a, r, ii, etc ... Ou un chercher-remplacer pour remplacer [(rien)i] par [(espace)i] (et éventuellement l'opération inverse chez celui qui copie le code si jamais JS est sensible à la présence de l'espace ...)
Sujet clos
Aller à