11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] - Ciblage dans un menu accordeon jquery

Bonjour à tous,

J'ai réalisé un menu accordéon qui fonctionne bien. Hormis l'image dans le titre contenu dans le style boxoff/boxon que je voudrais changer lorsque le menu est ouvert ou fermé. Je n'arrive pas cibler correctement le titre.
Merci de votre aide...


  $(document).ready(function() {  
        $('div#box').hide();    
        $('div.box-contain-top>h3 a').click(function(){
		
  			var $nextDiv = $(this).parent().parent().next(); 
			var $nextTitle = $(this).parent().parent().next(); 
			
			$nextTitle.siblings('div.box-contain-top>h3').toggleClass('boxooff');
					
			$(this).parent().toggleClass('boxon');
		    $nextDiv.slideToggle('normal').siblings('div.box-contain-content').slideUp('normal');
			
			 
        });  
      });





 <div class="box-contain"  >
    
   	<div class="box-contain-top">
         <h3 class="boxoff" > <a href="#">Titre 1</a></h3>
    </div>      	
		<div class="box-contain-content"  style="display:none;">
		Contenu 1
        </div>
        
   	  	<div class="box-contain-top">
         <h3 class="boxoff"><a href="#">Titre 2</a></h3>
        </div>	
		<div class="box-contain-content" style="display:none;" class="box">
		Contenu 2
        </div>      
  
   		 <div class="box-contain-top">
         <h3 class="boxoff"><a href="#">Titre 3</a></h3>
        </div>
		<div class="box-contain-content" style="display:none;" class="box">
		contenu 3
        </div>
        <div class="box-contain-top">
         <h3 class="boxoff"><a href="#">Titre 4</a></h3>
        	</div>
		<div class="box-contain-content" style="display:none;" class="box">
		contenu 4
        </div>
    
   </div>

Modifié par fabcreaweb (17 Jun 2009 - 18:21)
Le lien n'étant nécessaire que lorsque JS est activé, il devrait être généré via le DOM. Pour une autre manière de procéder, voir cet exemple.
Modifié par Benjamin D.C. (08 Jun 2009 - 18:15)
J'ai procédé d'une autre manière en utilisant une boucle each et un hasClass :


 $(document).ready(function() {  
        $('div.box-contain-content').hide();    
        $('div.box-contain-top>h3 a').click(function(){
					
  			var $nextDiv =  $(this).parent().parent().next(); 
			var $div = $(this).parent();			
						
			$("div.box-contain-top> h3").each(function(){					
				if ($(this).hasClass('boxon')){				
					//$(this).addClass('boxoff');
					$(this).removeClass('boxon');
				}			
			});				
			$div.toggleClass('boxon');			
			$nextDiv.slideToggle('fast').siblings('div.box-contain-content').slideUp('normal');
																						
			
		});  
      });


Ça fonctionne excepté lorsque l'on clique deux fois sur le même lien l'image de la puce va sur off et revient sur on tout de suite après.

Je sais pas si c'est très optimisé Smiley confused
Modifié par fabcreaweb (09 Jun 2009 - 10:30)
J'ai finalement trouvé une solution :

	
$("div.box-contain-top>h3").click(function(){		  	
				$("div.expand:visible").slideUp("slow");
				$("div.expand:hide").each(function(){				
			        $(this).parent().find('div.box-contain-top>h3').removeClass('boxon');					
				});				
				$(this).parent().next().slideDown("fast");
				$(this).toggleClass('boxon');				
				return false;
			});
Sujet clos
Aller à