web-dev-qa-db-fra.com

visibilité: div/visible

Quel est le meilleur moyen de montrer une div quand on clique sur un bouton puis de le cacher avec un bouton de fermeture?

Mon code Jquery est comme suit:

$(".imageIcon").click(function(){
$('.imageShowWrapper').css("visibility", 'visible');
});
 $(".imageShowWrapper").click(function(){
$('.imageShowWrapper').css("visibility", 'hidden');
});

sauf que le problème que je rencontre est qu'il se ferme automatiquement sans aucun clic. Il charge tout ok, affiche pendant environ 1/2 seconde, puis se ferme. Des idées?

jquerycsshtmlvisibility
17
Scott Robertson

Vous pouvez utiliser les méthodes show et hide:

$(".imageIcon").click(function() {
    $('.imageShowWrapper').show();
});

$(".imageShowWrapper").click(function() {
    $(this).hide();
});
25
undefined

Selon vos besoins, je pense que ce dont vous avez besoin est aussi simple que cela: http://jsfiddle.net/linmic/6Yadu/

Toutefois, l’utilisation de la visibilité diffère de l’utilisation de la fonction afficher/masquer, détails sanglants: Quelle est la différence entre visibilité: masqué et affichage: aucun?

5
Linmic

Une autre option:

$(".imageIcon, .imageShowWrapper").click(function() {  
    $(".imageShowWrapper").toggle($(this).hasClass('imageIcon'));     
});

Vous pouvez également utiliser fadeToggle et slideToggle

2
brains911
$(".imageIcon, .imageShowWrapper").click(function(){
    $('.imageShowWrapper').toggle();
});
0
Erik J. Olson

Vous obtiendrez une transition plus douce en utilisant les méthodes de fondu:

var imageIcon = $(".imageIcon"),
    imageShowWrapper = $(".imageShowWrapper");

imageIcon.on("click", function(){
  imageShowWrapper.stop().fadeIn();
});

imageShowWrapper.on("click", function(){
   $(this).stop().fadeOut();
});

Démo: http://jsbin.com/uhapom/edit#javascript,html,live

0
Sampson