ToggleClass("active")

Résolu

leito666 Messages postés 74 Date d'inscription Statut Membre Dernière intervention -
leito666 Messages postés 74 Date d'inscription Statut Membre Dernière intervention - 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
Active partition disk - Télécharger - Stockage
Comment activé - Guide
Npd activé c'est quoi - Guide
Active killdisk - Télécharger - Utilitaires
Active boot disk - Télécharger - Optimisation

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 38

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 Statut Membre Dernière intervention

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > leito666 Messages postés 74 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

..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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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

Message ne s'envoie pas données mobiles Redmi

Pass. Télécomm. Active

Désactiver télécommande

Erreur envoi photo par sms

Votre réponse

Discussions similaires