Rendre cliquable un élément :before

**barale61** · 28/09/2015, 18h59

Bonjour,

Je suis en train d'essayer de reproduire une maquette photoshop et je souhaiterais rendre cliquable une icône (ou du texte) placé dans une classe:before est-ce possible ?

exemple:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 .music:before {
        content: '+'; 
        font-size: 24px;
        margin-top: -10px;
        padding-left: 15px;
        padding-right: 5px;
        border-left: 1px solid #333;
        padding-top: 5px;
        padding-bottom: 5px;
        float: right;
    }

Je souhaite donc qu'en cliquant sur le + mon sous-menu s'affiche mais je ne sais pas comment faire pour solliciter mon +.
Je sais afficher mon menu mais pas solliciter le +.
Je vous remercie de votre aide.

**SpaceFrog** · 29/09/2015, 08h42

css ne possède pas d'evènement click

il faut passer par du javascript avec previousSibling(), ou plus simplement avec JQuery et .prev()

**NoSmoking** · 29/09/2015, 20h15

Bonjour,
les pseudos éléments :before/:after n'appartiennent pas au DOM et sont purement décoratifs.

Il te faut donc créer ton propre élément cliquable ou éventuellement mettre l'écouteur sur le conteneur et tester la position du clic.

**barale61** · 30/09/2015, 12h02

Ça veut dire que je ne pourrait pas changer la valeur de mon :before au clic ?

**SpaceFrog** · 30/09/2015, 12h59

si mais pas avec le :before directement
il faut rajouter un class

http://fiddle.jshell.net/wmhe49xs/1/

**melka one** · 30/09/2015, 16h45

jour

plutôt comme ça

http://fiddle.jshell.net/wmhe49xs/2/

**NoSmoking** · 30/09/2015, 19h01

...en cliquant sur le + mon sous-menu s'affiche...

Lorsque l'on veut effectuer une action sur un pseudo élément on ne peut "l'atteindre" que via son parent, dans ton cas c'est le parent, surement une LI, qui recevra l'événement et non le pseudo élément.

Dans ton cas vouloir atteindre uniquement le [+] ne peut se faire qu’en passant par un élément mis en début de conteneur, qui lui peut avoir un :before.

**barale61** · 01/10/2015, 19h24

Finalement, j'ai ajouté un bouton avec un :before. Alors je fais pour afficher mon sous-menu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function sous_menu() {
    var elem = document.getElementById('sous_menu');
     elem.style.display = 'block';
}

mais comment je fais pour qu'il se referme si elem.style.display = 'block';

J'ai essayé comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
        if elem.style.display = 'none'; 
        {
            elem.style.display = 'block';
        }
        else 
        {
            elem.style.display = 'none';
        }

Mais je suis apparemment loin de la vérité.

**melka one** · 01/10/2015, 22h21

tu est proche sauf que dans le if il faut doubler le signe egal et aussi au premier passage si le css est declarer dans un fichier css tu aura comme style une chaine vide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  if (elem.style.display == 'none' ||  elem.style.display == ''); 
        {
            elem.style.display = 'block';
        }
        else 
        {
            elem.style.display = 'none';
        }

**SylvainPV** · 01/10/2015, 22h56

Pas la peine de se compliquer autant la vie : elem.hidden = !elem.hidden

**melka one** · 02/10/2015, 11h00

Pas la peine de se compliquer autant la vie : elem.hidden = !elem.hidden

quèsaco ?

**SylvainPV** · 02/10/2015, 11h06

https://developer.mozilla.org/en-US/...ributes/hidden

C'est équivalent au code précédent sans forcer de style en inline ou de propriété display block.

**barale61** · 02/10/2015, 12h26

J'ai bien essayé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function sous_menu() {
    var elem = document.getElementById('sous_menu');
 
    if (elem.style.display == 'none' ||  elem.style.display == ''); 
            {
                elem.style.display = 'block';
            }
    else 
            {
                elem.style.display = 'none';
            }
}

mais le débogueur me renvoi l'erreur suivante:

Nom : debogueur.jpg
Affichages : 306
Taille : 36,7 Ko

**melka one** · 02/10/2015, 13h06

sur la ligne ou se trouve le if il y a le point vigule a la fin qui je pense est la cause du probleme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 if (elem.style.display == 'none' ||  elem.style.display == '')

C'est équivalent au code précédent sans forcer de style en inline ou de propriété display block.

je vient de tester pour comprendre la chose et c'est efficace mais sur le coup c'est déroutant cette histoire de booléen j'avoue préféré le coté lisibilité mais sinon pour la flambe c'est pas mal

**barale61** · 02/10/2015, 19h17

J'aurais quand même dû voir pour le ; et la comparaison == même si je débute. Je vous remercie d'avoir pris du temps pour répondre.
J'ai donc fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function sous_menu() {
    var sous_menu = document.getElementById('sous_menu');
    var btn_plus = document.getElementById('btn_plus')
    var btn_moins = document.getElementById('btn_moins')
 
    if (sous_menu.style.display == 'none' ||  sous_menu.style.display == '') {
                sous_menu.style.display = 'block';
                sous_menu.style.position = 'inherit';
                btn_plus.style.display = 'none';
                btn_moins.style.display = 'block';
            }
    else {
                sous_menu.style.display = 'none';
                btn_plus.style.display = 'block';
                btn_moins.style.display = 'none';
            }
        }

Et ça fonctionne très bien. Encore merci.

**NoSmoking** · 03/10/2015, 15h40

Envoyé par SylvainPV

Pas la peine de se compliquer autant la vie : elem.hidden = !elem.hidden

Malheureusement c'est imparfait et non pris en compte par IE < 11.

J'utilise souvent

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

oElem.style.display = oElem.offsetHeight ? 'none' : '';

• Cas 0 si aucune déclaration CSS n'a été effectué aucun soucis.

• Cas 1, déclaration de display:none dans le CSS.
- elem.hidden = !elem.hidden ne fonctionne pas
- oElem.offsetHeight ? 'none' : '' ne fonctionne pas

• Cas 2, déclaration de display:none dans le styleinline
- elem.hidden = !elem.hidden ne fonctionne pas
- oElem.offsetHeight ? 'none' : '' fonctionne

• Cas 3, il existe un cas 3 mais cette fois ci en utilisant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

oElem.style.display = oElem.offsetHeight ? 'none' : 'inherit';

avec cette façon de faire cela fonctionne dans les cas 1 et 2.

Il faut toutefois faire attention de ne pas avoir déclaré un rendu différent de celui par défaut, dans ce cas display = '' est meilleur.

**SylvainPV** · 03/10/2015, 16h15

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

[hidden]{ display: none; }

pour IE9 et autres ancêtres.

**NoSmoking** · 04/10/2015, 09h10

[hidden]{ display: none; }

cette "emplâtre" marche pour masquer au chargement mais pas pour échanger dynamiquement le rendu avec elem.hidden = !elem.hidden.

**SylvainPV** · 04/10/2015, 12h06

Oh tu chipotes :p

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
Object.defineProperty(HTMLElement.prototype, "hidden", {    
    get: function(){ return this.hasAttribute('hidden') },    
    set: function(bool){
     if(bool){ this.setAttribute('hidden', '') }
     else {    this.removeAttribute('hidden')  }
    }      
})