visibility:visible/caché div

Quel est le meilleur moyen pour afficher une div lorsque vous cliquez sur un bouton, puis de le cacher avec un bouton de fermeture??

Mon Jquery code est comme suit:

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

sauf le problème, je vais avoir, c'est qu'il se ferme automatiquement sans aucune clics. Il charge tout ok, s'affiche pendant environ 1/2 sec et ferme. Des idées?

OriginalL'auteur Scott Robertson | 2012-05-01

  1. 25

    Vous pouvez utiliser le show et hide méthodes:

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

$(".imageShowWrapper").click(function() {
    $(this).hide();
});
    hey merci pour votre réponse, je veux la div pour être caché tout d'abord, ai-je besoin d'utiliser la même fonction hide() ou puis-je utiliser le CSS visibilité de la propriété
    Robertson, vous êtes les bienvenus, vous pouvez cacher la div à l'extérieur de gestionnaire d'événements, de masquer les ensembles de display:none à un élément.
    hmm peut-être que je ne l'ai pas mise en œuvre correctement, je suis encore à apprendre beaucoup de ce genre de choses. Dans mon fichier CSS, j'ai placé display:none dans les propriétés de imageShowWrapper mais maintenant, le Jquery habitude de nuire à la div
    Robertson voir cela, vous pouvez le mettre à jour: jsfiddle.net/kgeMg/1
    Il y a évidemment quelque chose de plus à mon script de l'arrêt de ce travail, Merci pour toutes les réponses

    OriginalL'auteur undefined

  2. 5

    Selon votre condition, je crois que ce que vous avez besoin est aussi simple que cela: http://jsfiddle.net/linmic/6Yadu/

    Cependant, l'utilisation de la visibilité est différent de l'utilisation afficher/masquer la fonction, détails techniques: Quelle est la différence entre visibility:hidden et display:none?

    c'est exatcly ce que je veux et il est à peu près ce que mon code d'origine est, juste que sa ne fonctionne pas pour une raison quelconque.Merci pour la réponse

    OriginalL'auteur Linmic

  3. 2

    Une autre option:

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

    Vous pouvez également utiliser fadeToggle et slideToggle

    OriginalL'auteur brains911

  4. 0

    Vous obtenez une transition en douceur à l'aide de la fade méthodes:

    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,vivre

    OriginalL'auteur Sampson

  5. 0
    $(".imageIcon, .imageShowWrapper").click(function(){
    $('.imageShowWrapper').toggle();
});

    OriginalL'auteur Erik J. Olson