Rendre cliquable un élément :before
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.
Rendre cliquable un élément :before
Ça veut dire que je ne pourrait pas changer la valeur de mon :before au clic ?
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é.
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
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.
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.
