ToggleClass("active")

Résolu/Fermé

leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017 - Modifié par leito666 le 23/06/2016 à 06:22
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017 - 26 juin 2016 à 19:44

Bonjour,

j'ai commencé un petit script ( réponsive ) en .html ( + .js ) et .css

les liens pour la démo ( à tester sur codepen.io/pen ):

.HTML --> http://pasteall.org/71103/html4strict
.CSS --> http://pasteall.org/71104/css

Dans le script .html j'ai :

$(".toggle, .toggle-inner, .menu").toggleClass("active");

dans le script .css ( pour la taille smartphone )


@media screen and (min-width: 0px) {

    .menu { /* .... */ ;}
        .menu.active { /* .... */ ;}
    .active .menu-link { /* .... */ ;}

}

Afin de me mieux me repérer avec Js (que je découvre ) , j'ai essayé de supprimer ".menu" de java :

$(".toggle, .toggle-inner").toggleClass("active");

et dans le .css " .menu.active " devient --> " .active .menu "
( + alignement dans le script )


@media screen and (min-width: 0px) {

    .menu { /* .... */ ;}
    .active .menu { /* .... */ ;}
    .active .menu-link { /* .... */ ;}

}

Mais impossible de le faire marcher la fonction " .active " avec " .menu "
( .active .menu ) ..

contrairement à " .menu-link " ( .active .menu-link ) qui n'est pas dans Js
mais qui après le clique est utilisé ..

une idée s'il vous plaît ?
:)

A voir également:

Toggleclass active
Le message n'a pas été envoyé car le service n'est pas activé sur le réseau - Forum Xiaomi
Active partition disk - Télécharger - Stockage
Safesearch reste activé - Forum Logiciels
Erreur envoi photo par sms ✓ - Forum Opérateurs & Réseaux mobiles
Windows est activé à l'aide d'une licence numérique - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38312 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
23 juin 2016 à 09:10

Bonjour

Un début de réponse je pense :
En css ... sais tu ce qu'est un selecteur descendant ?
Que fait .menu .active ... et que fait .active .menu selon toi ?

Réponse 2 / 4

leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 23/06/2016 à 11:12

Bonjour ,

..une sorte de livret A ?

Pour " .active .menu "
1ere chose je constate un espace entre les 2 .. donc quand " .active " (placé en premier ) est positif ( ... à mon avis ... ) tout "sélecteurs" comme ".menu" ( à coté ) ou autre devient " fonctionnel "

.active .menu {} 
.active .sera-aussi-actif {}

Pour " .menu.active "
aucun espace .. il doit sûrement s’agir d'un " ensemble " ( seulement si .menu est actif..et seulement lui ) ...?

jordane45 Messages postés 38312 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
Modifié par jordane45 le 23/06/2016 à 11:21

Ah la la la .... je t'ai pourtant donné une piste " selecteur descendant " :-)

https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048

quand " .active " (placé en premier ) est positif ( ... à mon avis ... ) tout "sélecteurs" comme ".menu" ( à coté ) ou autre devient " fonctionnel "

=> On applique le style (à la place de " devient fonctionnel" ) aux éléments qui ont la class "menu" qui sont contenus dans un élément qui a la class "active"

leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 23/06/2016 à 12:26

exact ..Merci pour le lien !

__ << On applique le style (à la place de " devient fonctionnel" ) aux éléments qui ont la class "menu" qui sont contenus dans un élément qui a la class "active" >>

..c'est ce que je disais (non..?) :D

j'vais essayer avec un sélecteur d'attributs
( qui me semble bien à première vue .. )

.active[cible] {
  color: green;
}

ou un sélecteur adjacent

.active + .cible {
  color: red;
}

( si quelqu'un a une autre info / tuto / lien / renseignement merci ;)

Réponse 3 / 4

fredconv Messages postés 125 Date d'inscription mardi 25 août 2009 Statut Membre Dernière intervention 4 décembre 2017 38
23 juin 2016 à 12:30

Bon effectivement apapremment il y a une confusion sur certains termes, sur les selecteur en css etc...

tout d'abord: tes selecteurs:

.menu -> selection du tag html qui possede la classe "menu" (ex: <nav class='menu'> ... </nav>)

.menu.active ou .active.menu (meme chose) -> selection du (ou des) tag html qui possede les deux classes "menu" et "active" a la fois(ex: <nav class="menu active"> ... </nav> ou <div class="active menu autreClasses ..."> ... </div>)

.active .menu -> selection du (ou des) tag html avec une classe 'menu', lui meme enfant (donc a l interieur ou comme dit précédemment descendant) d'un tag html possedant la classe 'active' (ex: <div class='active'><nav class='menu'> ... ici seul l element nav sera selectionné mais il doit se trouver a l interieur de qq chose qui possede la classe active)

.menu .active ->selection du tag html avec une classe 'active', lui meme enfant d'un tag possedant la classe 'menu'

donc ".active .menu" et ".menu .active" ne selectionnent pas du tout les memes elements

pour les exemple j ai mis des tag <nav> mais ca pourrait etre des div, des p, etc ...
ton code jQuery (et non pas javascript ou java)
$(".toggle, .toggle-inner, .menu").toggleClass("active");

va ajouter la classe 'active' (ou l enlever si elle est déja presente) a chaque element html(ou tag) possedant les classes "toggle", "toggler-inner" et "menu"

Aussi comme l a suggeré jordane45, il te faudrait mieux cerner les selecteur css, mais aussi les selecteur jquery ;)

leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
23 juin 2016 à 12:55

Merci pour toutes ces Explications Fredconv :)

__ << .menu.active ou .active.menu (meme chose) >>

sauf erreur de ma part dans ma "demo" , avec ou sans jQuery pour "appeler" un sélecteur " .active.menu " ( tout collé ) ne passe pas
ainsi que " .menu .active " ( avec un espace )

encor Merci

jordane45 Messages postés 38312 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
23 juin 2016 à 13:19

sauf erreur de ma part dans ma "demo" , avec ou sans jQuery pour "appeler" un sélecteur " .active.menu " ( tout collé ) ne passe pas
ainsi que " .menu .active " ( avec un espace )

Quand tu dis... ne passe pas... c'est à dire ???
Car en CSS ... tu ne peut pas attribuer une class .... tu ne peux qu'appliquer du style aux class "selectionnées"....
Pour donner la class "active" à un objet ayant la class "menu"... ce n'est qu'en Javascript (et/ou jquery) que tu peux le faire....
C'est justement le rôle du toggle que tu as retiré.

leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 24/06/2016 à 05:49

..toggle fait parti de ma démo ..je ne l'ai pas retirer ,
même si il est possible de simplifier d'avantage avec un .png ( à cause de la semi-transparence ) ..je préféré pouvoir le rendre modifiable directement )

j'ai uniquement retiré

/* tablette */
@media screen and (min-width: 480px) {}
/* Pc */
@media screen and (min-width: 800px) {}

je ne suis pas certain que les valeurs (480px et 800px) soit les meilleurs..mais pratique sur mon smartphone à l'horizontal ( "mode paysage" il me semble ) le site bascule au format " tablette " ( 480px )

__ << Quand tu dis... ne passe pas... c'est à dire ??? >>

Après avoir fais la démo ( grâce à des fragments de scripts + documentations ) j'essaye de supprimer " .menu " dans le script jquery

$(".toggle, .toggle-inner").toggleClass("active");

et dans le .css " .menu.active " devient --> " .active .menu "

.menu devient enfant de .active
( comme .menu-link )


@media screen and (min-width: 0px) {

    .menu { /* .... */ ;}
    .active .menu { /* .... */ ;}
    .active .menu-link { /* .... */ ;}

}

.active .menu-link passe très bien mais .active .menu " ne passe pas " ( actuellement mais j’approche du but Merci encor Jordane45 )

leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
25 juin 2016 à 09:03

Bonjour ,

je pense que quelque chose m'échappe ..
( ma démo marche . je cherche simplement à simplifier jquery .. )

Comment faire fonctionner .menu grâce à .active ( issue de .toggle.active ) ?
( ..donc sans .menu dans le script jquery )

j'ai essayé les sélecteurs adjacent , descendant , d’attributs..rien ne passe .

( " .active .menu-link " passe )

Réponse 4 / 4

leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017
Modifié par leito666 le 26/06/2016 à 19:46

..trouvé j'ai ajouté une class " elements " ;)

    <script>
    $(".toggle").click(function(){
      $(".elements").toggleClass("active");
    });
    </script>

(avan)

    <script>
    $(".toggle").click(function(){
      $(".toggle, .toggle-inner, .menu").toggleClass("active"); 
    });
    </script>

la démo ( complète à tester sur codepen.io/pen )
.HTML
http://pasteall.org/71250/html4strict
.CSS
http://pasteall.org/71251/css

Sujet RÉSOLU .
Merci

Discussions similaires

Enlever le pass. Telecomm. Active

Safe search google activé tout seul

désactivation SafeSearch

ReadyBoost n'est pas activé because l'ordinateur est trop rapide...

Safesearch activer tout seul