2011-03-21 2 views
45

Quand je veux cacher un HTML <div>, j'utilise le code JavaScript suivant:Comment cacher une div avec jQuery?

var div = document.getElementById('myDiv'); 
div.style.visibility = "hidden"; 
div.style.display = "none"; 

Quel est l'équivalent de ce code jQuery?

Répondre

92
$('#myDiv').hide(); 

ou

$('#myDiv').slideUp(); 

ou

$('#myDiv').fadeOut(); 
5

$('#myDiv').hide() va cacher la div ...

18
$("#myDiv").hide(); 

va régler l'affichage de css sans pareil. si vous devez définir la visibilité cachée aussi bien, pourrait le faire via

$("#myDiv").css("visibility", "hidden"); 

ou combiner les deux dans une chaîne

$("#myDiv").hide().css("visibility", "hidden"); 

ou tout écrire avec une fonction css()

$("#myDiv").css({ 
    display: "none", 
    visibility: "hidden" 
}); 
7

$("myDiv").hide(); et $("myDiv").show(); ne fonctionne pas très bien dans Internet Explorer.

La façon dont j'ai contourné ceci était d'obtenir le contenu html de myDiv en utilisant .html(). Je l'ai ensuite écrit dans un DIV nouvellement créé. J'ai ensuite ajouté le DIV au corps et ajouté le contenu de la variable Content au HiddenField puis lu ce contenu de la div nouvellement créée quand je voulais montrer le DIV. Après que j'ai utilisé la méthode .remove() pour se débarrasser de la DIV qui maintenait temporairement mon DIVs html.

var Content = $('myDiv').html(); 
     $('myDiv').empty(); 
     var hiddenField = $("<input type='hidden' id='myDiv2'>"); 
     $('body').append(hiddenField); 
     HiddenField.val(Content); 

et puis quand je voulais afficher le contenu à nouveau.

 var Content = $('myDiv'); 
     Content.html($('#myDiv2').val()); 
     $('#myDiv2').remove(); 

C'était plus fiable que les .hide() & .show() méthodes.

10

Si vous voulez que l'élément à garder son espace, vous devez utiliser,

$('#myDiv').css('visibility','hidden') 

Si vous ne voulez pas l'élément de conserver son espace, vous pouvez utiliser,

$('#myDiv').css('display','none') 

ou simplement,

$('#myDiv').hide();