Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Auteur
lionel_css3
#
Citer
274 Posts
Bonjour,

je cherche à détecter l’événement d'ouverture d'un panneau d'accordéon jquery (l’événement change ne convient pas car il agit à la fermeture autant qu'à l'ouverture)

j'ai écrit ce code

$( "h3.ui-accordion-header.ui-state-default" ).click(
   function(event) { 
   
   console.log(this);
   
});


.ui-state-default est l'état du panneau fermé et .ui-state-active est l'état du panneau ouvert.

Curieusement le click est détecté autant sur l'ouverture que sur la fermeture...

quand je clique sur le panneau fermé j'obtiens:

<h3 class="neuf ui-accordion-header ui-helper-reset ui-state-hover ui-state-focus ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">


et quand je clique sur le panneau ouvert j'obtiens:


<h3 class="neuf ui-accordion-header ui-helper-reset ui-state-hover ui-state-focus ui-state-default ui-corner-all" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">


alors que je m'attendais au contraire.....

c'est pas un peu bizarre..?
Modifié par lionel_css3 (21 Feb 2012 - 21:31)

^
lionel_css3
#
Citer
274 Posts
j'ai trouvé une solution en faisant ceci (j'ai rajouté la déclaration de l'accordéon pour plus de clarté)


$("#lg-accordion-1").accordion({
	active : false,
	collapsible : true
	});
	
$("#lg-accordion-1").delegate( 'h3.ui-accordion-header.ui-state-active', 'click',   function() { 
   
   console.log(this);
   
});


ça fonctionne; l'affichage du log se fait uniquement à l'ouverture du panneau mais c'est bizarre car il affiche ui-state-active comme si il tenait compte de l'état après le click et non pas au moment du click...

quelqu'un peut il expliquer cela???

^
lionel_css3
#
Citer
274 Posts
Je rebondis sur mon post, est ce que quelqu'un sait si on peut détecter les deux états suivants d'un accordion jQuery:

- tous les panneaux sont fermés

- 1 panneau est ouvert

je voudrais afficher un image (pour meubler) en dessous d'un accordion fermé, et dès qu'on ouvre un panneau, l'image passe en display:none et disparait et la hauteur du panneau qui s'ouvre prend sa place dans la hauteur, ceci pour ne pas casser ma mise en page...

merci

^
lionel_css3
#
Citer
274 Posts
j'ai trouvé une solution un peu tordue mais elle marche, avec ce code d'initialisation de mon accordion.


	$("#lg-accordion-1").accordion({
		active : false,
		autoHeight : false,
		collapsible : true,
		change : function(evt, ui)  {
		  $("div#deco-3d").hide();
		  index_newContent = ui.newContent.find("p.id-hidden").text();
		  console.log(index_newContent);
			  if (index_newContent == "")  {
				  $("div#deco-3d").show();
			  }
		  }
	});



je me suis rendu compte que si on fermait un panneau ouvert (grace à collapsible : true dans les paramètres, il renvoyait une chaine vide pour index_newContent (élément de ui.newContent), cette variable me sert ailleurs.

le div#deco-3d est caché si un panneau est ouvert, il est visible si aucun panneau n'est ouvert, c'est ce que je voulais mais je ne comprend pas pourquoi ça fonctionne...

^