Rendre cliquable un élément :before

Version imprimable

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:

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.

29/09/2015, 08h42
SpaceFrog

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

il faut passer par du javascript avec previousSibling(), ou plus simplement avec JQuery et .prev()
29/09/2015, 20h15
NoSmoking

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.
30/09/2015, 12h02
barale61

Rendre cliquable un élément :before

Ça veut dire que je ne pourrait pas changer la valeur de mon :before au clic ?
30/09/2015, 12h59
SpaceFrog

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

http://fiddle.jshell.net/wmhe49xs/1/
30/09/2015, 16h45
melka one

jour

plutôt comme ça

http://fiddle.jshell.net/wmhe49xs/2/
30/09/2015, 19h01
NoSmoking

Citation:

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

Rendre cliquable un élément :before

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

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:

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

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:

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'; }

01/10/2015, 22h56
SylvainPV

Pas la peine de se compliquer autant la vie : elem.hidden = !elem.hidden
02/10/2015, 11h00
melka one

Citation:

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

quèsaco ?
02/10/2015, 11h06
SylvainPV

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.

1 pièce(s) jointe(s)

Rendre cliquable un élément :before

J'ai bien essayé:

Code:

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:

Pièce jointe 189256

02/10/2015, 13h06
melka one

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:

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

Citation:

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 ;)

Rendre cliquable un élément :before

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:

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.

03/10/2015, 15h40
NoSmoking

elem.hidden = !elem.hidden

Citation:

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:

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:

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.
03/10/2015, 16h15
SylvainPV

Code:

[hidden]{ display: none; }

pour IE9 et autres ancêtres.
04/10/2015, 09h10
NoSmoking

Citation:

[hidden]{ display: none; }

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

Oh tu chipotes :p

Code:

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')  }
    }      
})

http://jsfiddle.net/Lvk2m716/

Et pour les navigateurs de l'avant-guerre qui n'ont même pas les getter/setter ES5, c'est retour à jQuery...

05/10/2015, 21h52
NoSmoking

Citation:

Oh tu chipotes :p

je chipote encore un peu, on s'éloigne quand même un peu d'un code simple :lol:
06/10/2015, 00h45
SylvainPV

Rien n'est simple à partir du moment où l'on doit supporter les vieux Internet Explorer...