Discussion :

[drick35]

Bonjour,
J'ai un problème avec toggle(), le script ci-dessous fonction bien, il ouvre le ul souhaité et remplace bien l'image voulu.

1) Par contre lorsqu'on clic une seconde fois sur img, le ul se referme mais l'image n'est pas de nouveau remplacé !!

2) Lorsqu'on fait plus fois la manip en cliquant sur l'image, la hauteur reste à 0
Le bug vient à priori de

Code :

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

1
2
function(){ //réglage de la hauteur en auto
if(this.wrapper.getStyle('height') != "0px"){this.wrapper.setStyle('height', 'auto');	}

mais comment faire?

Code de la fonction

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
var plier_deplier=function() {
		$$('#sortable-list img').each(function(el)
			{ 
			 el.addEvent('click', function()
				{	
 
				var ul=el.get('id').substr(3);
				var limodif=el.get('id').substr(5);
				var status = {  'false':new Element('img', {'id':"img"+ul,'src':"img/Expand.png",'style':"width:16px;height:16px;float:left"}),
								'true': new Element('img', {'id':"img"+ul,'src':"img/Collapse.png",'style':"width:16px;height:16px;float:left"})};	 
 
					 var myFx = new Fx.Slide(ul,{
										duration:500,
										onComplete: function(){ //réglage de la hauteur en auto
											if(this.wrapper.getStyle('height') != "0px"){this.wrapper.setStyle('height', 'auto');	}
											$('img'+ul).destroy();
											var id='t'+$(document.body).getElement('li[alt='+limodif+']').get('id').substr(5);
											status[myFx.open].inject($(id), 'before'); //inject la nouvelle image
											plier_deplier();// redéfinir addEvent pour prise en compte
											}
											}).toggle();			
				});
			});		
}
plier_deplier();

Merci pour votre aide
cedric

[vermine]

Bonjour,

Vous avez une page de tests ? Il y a deux-trois trucs que je ne visualise pas bien.

[drick35]

il faut aller sur lien.

Les images en question sont des triangles rouges.

[vermine]

Je n'ai pas encore trouver la solution mais on va déjà mettre un peu d'ordre. Voici une version plus simple :

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
 
var plier_deplier=function() {
   $$('#sortable-list img').each(function(el)
   { 
       var ul=el.get('id').substr(3);
       var limodif=el.get('id').substr(5);
       var source_img = {  'true':"img/Expand.png", 'false': "img/Collapse.png"};	 
 
       var myFx = new Fx.Slide(ul,{
           duration:500,
           onComplete: function(){
 
               //redimensionner
 
               //alert(myFx.open);
               $('img'+ul).src = source_img[myFx.open];
           }
       }).hide();
 
       el.addEvent('click', function()
       {	
           myFx.toggle();			
       });
   });		
}

Tout d'abord, seule la gestion du toggle se fait sur le 'click'. Il ne faut pas recréer un slide à chaque clic. Et au lieu de détruire puis de recréer une image, il suffit de changer la source.

Je n'ai pas compris pourquoi myFx.open fonctionne ici à l'envers donc j'ai inversé 'true' et 'false' dans le tableau d'images.

Pour l'instant, les images se changent bien. Par contre, il faut retravailler la partie qui redimensionne le wrapper car les sous-sous-menus n'apparaissent pas.

[drick35]

alors avec

Code :

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

if(this.wrapper.getStyle('height') != "0px"){this.wrapper.setStyle('height', 'auto');	}

les sous menu s'ouvrent bien et se referme la premier fois mais en cliquant plusieurs fois sur l'image les sous article veulent plus s'ouvrir.
Sa fonction 1 fois mais pas 2 , d'ailleurs l'image reste bloqué après

[vermine]

C'est normal que la discussion soit passée en résolue ?