Pourquoi faut il double-cliquer ?

Bonjour,
Tout d'abord je tiens à prévenir que j'ai pas fait de recherche sur le forum car je ne sais pas quoi chercher...
Donc j'ai fait un petit explorateur de fichiers en "ajax" que vous pouvez trouver ici : http://webeleve.ensmp.fr/~06quehan/nv.php . Je suis débutant total en javascript (le script que je vous montre est en grande partie pompé ailleurs) (et débutant tout court pour le reste) et je ne comprends simplement pas pourquoi la premiere fois que je clique sur un lien, je dois double-cliquer pour dérouler l'arbre alors qu'apres un simple clic suffit. Accessoirement, je ne comprend pas non plus pourquoi l'ascenseur horizontal s'affiche lorsque on déroule la chose...
Merci d'avance pour votre aide !

bonjour,

ce n'est pas un double clic... Il faut en fait réaliser 2 fois un simple clic sur l'élément.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function change(id){ var d = document.getElementById(id); var ds = document.getElementById(id+'s'); if(d){ if(d.style.display == 'block'){ d.style.display = 'none'; ds.style.display = 'block'; } else { d.style.display = 'block'; ds.style.display = 'none'; } } }

---

La syntaxe

Code:

---

1 2	element.style.attribut

---

ne permet pas d'accèder aux informations définies dans la CSS, mais aux informations définies dans l'attribut style des balises, par exemple :

Code:

---

1 2 3 4

<div style="display: block; color:#AAAAAA; border: 1px solid #AAAAAA"> bla bla bla bla bla bla </div>

---

Il faut savoir que si tu définis pour un élément dans la feuille de style ceci :

Code:

---

1 2	display: none; // ou block

---

ton code javascript

Code:

---

1 2	d.style.display

---

ne renverra.... rien : ni "block" ni "none" (ou une autre valeur de l'attribut display). Fais un alert(d.style.display) juste avant la condition ;)

Dans ce cas la condition

Code:

---

if (d.style.display == 'block')

---

est fausse donc le else est appliqué (qui est visiblement le style par défaut de tes éléments) :

Code:

---

1 2 3

d.style.display = 'block'; ds.style.display = 'none';

---

c'est pour ça que lors du 1er clic "rien de se passe". Mais tu attribues une valeur à display (block et none). Tu réalises une "initialisation" de display.

Lors du second clic sur le même élément les valeurs de display sont définies (lors du 1er clic) donc dans ce cas ta condition devient vraie.

Lors du 3ème clic (toujours sur le même élément) les valeurs de display existent toujours, ta condition est fausse, etc...


Le mieux pour éviter ce désagrément :
ajoute une condition à ton if :

Code:

---

1 2	if(d.style.display == 'block' || d.style.display == '' )

---

ou initialise l'attribut display en utilisant l'attribut style de tes div et non la CSS.

• pour tes div d
  
  Code:

  ---

  1 2	<div id="d1" style="display: block">

  ---

• pour tes div ds
  
  Code:

  ---

  1 2	<div id="d1s" style="display: none">

  ---

il y a aussi obj.currentStyle qui renvoie le style avec les CSS

Code:

---

if(d.currentStyle.display == 'block' || d.currentStyle.display == '' )

---

Citation:

---

Envoyé par FremyCompany

il y a aussi obj.currentStyle qui renvoie le style avec les CSS

---

Uniquement valable pour IE...

Pour Firefox, il faut passer par getAttribute (qui n'est pas reconnue par IE).
Par contre pour Opéra, je ne sais pas :?

Je viens de tester et ca marche sous FF aussi ;)

Citation:

---

Envoyé par FremyCompany

Je viens de tester et ca marche sous FF aussi ;)

---

ne marche pas avec la version 1 de Firefox :oops:

Sans doute un ajout de la v2.0

Ok ! Merci beaucoup, j'ai tout compris !

Bonne continuation !

Citation:

---

Envoyé par FremyCompany

Sans doute un ajout de la v2.0

---

oui, sans doute ;)

tiens je ne connaissait pas ce currentSytle ...

Pratique pour accéder au style css
à noter qu'il retourne le style par défaut de l'objet si rien n'est indiqué ...

par exemple sur un select il retourne un width auto ...