toggle() plante pourquoi?

Version imprimable

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:

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:

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

11/01/2013, 14h27
vermine

Bonjour,

Vous avez une page de tests ? Il y a deux-trois trucs que je ne visualise pas bien. :oops:
11/01/2013, 14h45
drick35

il faut aller sur lien.

Les images en question sont des triangles rouges.

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

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. 8O

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.

11/01/2013, 16h47
drick35

alors avec

Code:

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 8O, d'ailleurs l'image reste bloqué après
11/01/2013, 19h28
vermine

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