Cacher un élément quand l'utilisateur clique n'importe ou sauf sur l'élément
Utilisateur anonyme
-
Noureiev -
Noureiev -
Bonjour,
Voilà plusieurs jours que je bloque sur un problème CSS.
J'ai ces deux bout de code CSS :
Quand l'input type checkbox est checked, le bloc ul qui se trouve juste après va s'afficher. Et quand je reclique sur la checkbox l'ul va disparaitre.
J'aurai besoin de savoir comment faire pour que l'ul ce cache quand l'utilisateur clique n'importe ou sauf sur l'élément checkbox.
J'accepterai une solution CSS ou Jquery.
Merci beaucoup à celui qui me trouvera un début de solution :)
Voilà plusieurs jours que je bloque sur un problème CSS.
J'ai ces deux bout de code CSS :
.digiplace-multi-select > ul {
display: none;
}
.digiplace-multi-select > input[type=checkbox]:checked + ul {
display: block;
}
Quand l'input type checkbox est checked, le bloc ul qui se trouve juste après va s'afficher. Et quand je reclique sur la checkbox l'ul va disparaitre.
J'aurai besoin de savoir comment faire pour que l'ul ce cache quand l'utilisateur clique n'importe ou sauf sur l'élément checkbox.
J'accepterai une solution CSS ou Jquery.
Merci beaucoup à celui qui me trouvera un début de solution :)
A voir également:
- Cacher un élément quand l'utilisateur clique n'importe ou sauf sur l'élément
- Mon clavier fait n'importe quoi - Accueil - Informatique
- Élément introuvable impossible à supprimer - Guide
- Comment utiliser chromecast sur tv - Guide
- Cacher ses amis sur facebook - Guide
- Cacher son numéro - Guide
1 réponse
Bonsoir,
en effet il faut utiliser JavaScript pour cela(JQuery n'en est qu'une 'extension' sous forme de librairie de script). En tout cas dès qu'il y a de l'interactivité, par exemple:
en effet il faut utiliser JavaScript pour cela(JQuery n'en est qu'une 'extension' sous forme de librairie de script). En tout cas dès qu'il y a de l'interactivité, par exemple:
<head>
<style type='text/css' rel='stylesheet'>
.montre{
display:block;
}
.cache{
display:none;
}
</style>
</head>
<body>
<p id='bidule'>du texte est caché ou affiché<p>
<div id='masque' style='border: 1px solid red;'/>masquer le texte</div>
<a href='#' id='affiche' />affiche si masqué</a>
<script>
//-- document.getElementById( permet de sélectionner un élément par son ID
//-- addEventListener ajoute un "écouteur d'action", il contient la méthode('click') et une fonction
document.getElementById('affiche').addEventListener(
'click',
function(){document.getElementById('bidule').className='montre';}//-- attribue la class montre
);
//-- même chose
document.getElementById('masque').addEventListener(//-- en utilisant le div
'click',
function(){ document.getElementById('bidule').setAttribute('class' ,'cache');}//-- et attribue la class(attribut) cache
);
</script>
</body>
