Menu

Cacher un élément quand l'utilisateur clique n'importe ou sauf sur l'élément

Messages postés
20
Date d'inscription
mardi 26 février 2013
Statut
Membre
Dernière intervention
12 avril 2019
- - Dernière réponse :  Noureiev - 13 avril 2019 à 00:58
Bonjour,

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 :)
Afficher la suite 

Votre réponse

1 réponse

0
Merci
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:

<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>
Commenter la réponse de Noureiev