11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Selection d'un élément

Pages :
Merci pour ces exemples je vais pouvoir comprendre un peu comment je peux faire les choses. .. pleins de manières différentes pour le même résultat ! Smiley murf
J'ai opté pour la solution qui me parait la plus simple pour le moment à mes yeux ! Smiley lol 

		$(document).ready(function(){
			$('.container_infos_rubrique').click(function(){			
				$(".accordeon_sous_menu", this).toggleClass("accordeon_sous_menu_active");
				$("span:first", this).toggleClass("dropdown_accordeon_vivre_ici_second");
				$(".zone_titre_sous_menu",this).toggleClass("zone_titre_sous_menu_active");		
				$("div[id^='element_']",this).slideToggle(1000);
				return false;
			});	
		});


Merci de vos multiples réponses et explications.
L'héritage css ? peu être, je ne vois pas trop comment je peux faire pour mon cas, il y a peu être quelque chose qui m'échappe. Smiley murf

Les deux premiers toggleClass changent la couleur du background, le troisième change le padding d'une image/puce ouvrir/fermer, le slideToggle fait apparaitre une div.
Si tu regardes mes exemples je n'ajoute qu'une seule classe (sur le parent), et malgré tout cela change le css de 3 éléments (dont 2 par héritage css)
Modifié par SolidSnake (10 Sep 2014 - 15:36)
Re-Bonjour à tous,

Bon je suis encore dans la panade avec ce code. ça m'ouvre les deux div au lieu de une par une. Smiley bawling .


$('.container_infos_rubrique a.accordeon_rubrique').click(function (e) {
			    e.preventDefault()
			   $('.container_infos_rubrique').find(".line_grey").slideToggle(700).toggleClass("line_active");
$('.container_infos_rubrique').find("div[id^='element_']").slideToggle(1000);

			});



<div class="container_infos_rubrique">
    <div class="accordeon_sous_menu">	
             <a class="accordeon_rubrique" href="#">
		</a>

    </div>
    <div class="line_grey"></div>
    <div class="container accordeon_rubriques_pages"></div>



Je pige pas pourquoi il ne trouve pas find() .. . j'ai essayer avec des next() pour qu'il charge que la suivante mais là rien ne se passe. Idem pour les first ou first-child ! Smiley biggol
Modifié par blond1n (11 Sep 2014 - 13:53)
Bonjour.

Ben là je ne comprends plus, une nouvelle div.line_grey est apparu, je suis perdu.

Essaie de mettre un peu plus de code avec html (avec du contenu, et au moins deux contenus "accordeon"), et le CSS de ton accordeon.

Le mieux encore serait que tu te fasses un JSFiddle, ou un CodePen avec tes vrais classes...
J'ai essayer de faire un jsfiddle, ça en marchait plus du tout.. Je fais ça au plus vite ! Smiley sweatdrop

La div.line_grey est un élément vide, il y a un background gris sur 940px, je ne voulais pas mettre d'image pour ne pas surcharger le chargement. ..bien que. . Smiley rolleyes

Merci du coup de main en tout cas !
Bonjour.

Juste, essaie d'en mettre 2 de contenu (avec son lien) pour voir comment tu comptes en associer plusieurs.
Et où sont les div "div[id^='element_']" que tu as dans ton JS ?
Ok.

Ton problème se situe ici :
$('.container_infos_rubrique').find()

Sur ces deux lignes, tu recherches des éléments à l'intérieur de TOUTES les div.container_infos_rubrique, donc quand tu fais apparaître les enfants, ce sont les enfants de toutes ces div.

Donc tu dois d'abord rechercher le "bon" parent de ton lien avec la fonction parents() (avec un 's' parce que ce n'est pas le parent direct de ton lien)
http://jsfiddle.net/tw0td799/4/
J'avais lu des trucs sur les parent(s) sans trop savoir comment l'appliquer. ... je vais regarder attentivement ton code !

Un grand merci ! Smiley biggrin
Après concernant les id "element*", si tu ne les utilises pas ailleurs dans ton script ou ton css, libre à toi de les virer et d'utiliser la classe "accordeon_rubriques_pages" (pour éviter de t'embêter à incrémenter une variable)
Pages :
Sujet clos
Aller à