web-dev-qa-db-fra.com

jQuery & CSS - Supprimer / Ajouter un affichage: aucun

J'ai un div avec cette classe:

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

Et je voudrais avec certaines méthodes jQuery supprimer cet affichage: aucun; (ainsi la div a montré) et que l'ajouter à nouveau (ainsi la div ombrera).

Comment puis-je le faire? À votre santé

jquerycss
110
markzzz

Pour masquer la div

$('.news').hide();

ou

$('.news').css('display','none');

et pour montrer le div:

$('.news').show();

ou

$('.news').css('display','block');
182
Snehal Ghumade

jQuery vous fournit:

$(".news").hide();
$(".news").show();

Vous pouvez ensuite facilement afficher et masquer le ou les éléments.

69
JCOC611

En JavaScript:

getElementById("id").style.display = null;

Dans jQuery:

$("#id").css("display","");
14
Sergio

Alors, laissez-moi vous donner un exemple de code:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

Le lien sera le déclencheur pour montrer la div lorsque vous cliquez dessus. Donc, votre Javascript sera:

$('.trigger').click(function() {
   $('.news').toggle();
});

Il est presque toujours préférable de laisser jQuery gérer le style pour cacher et montrer des éléments.

Edit: Je vois que les personnes ci-dessus recommandent d'utiliser .show et .hide pour cela. .toggle vous permet de faire les deux avec un seul effet. Donc c'est cool.

14
Eli Gundry

Utilisez la bascule pour afficher et masquer.

$('#mydiv').toggle()

Consultez l'exemple de travail sur http://jsfiddle.net/jNqTa/

11
Hussein

je suggérerais d'ajouter une classe pour afficher/masquer des éléments:

.hide { display:none; }

puis utilisez jquery's . toggleClass () pour afficher/masquer l'élément:

$(".news").toggleClass("hide");
8
rubiii

Le seul moyen de supprimer un "display: none" en ligne via le css-api de jQuery est de le réinitialiser avec la chaîne vide (null ne fonctionne PAS btw !!).

Selon le document jQuery, il s'agit de la méthode générale pour "supprimer" une propriété de style en ligne une fois définie.

$("#mydiv").css("display","");

ou

$("#mydiv").css({display:""});

devrait faire l'affaire correctement.

IMHO il manque une méthode dans jQuery qui pourrait s'appeler "dévoiler" ou "révéler" qui au lieu de simplement définir une autre propriété de style en ligne désactive la valeur d'affichage correctement, comme décrit ci-dessus. Ou peut-être que hide() devrait stocker la valeur en ligne initiale et show() devrait restaurer cette ...

7
shoesel

les fonctions jQuery .show () et .hide () sont probablement votre meilleur choix.

6
Dave Child

Vous ne nous donnez pas beaucoup d'informations mais en général cela pourrait être une solution:

$("div.news").css("display", "block");
5
Yorian

Pour une raison quelconque, le basculement ne m'a pas fonctionné et a reçu l'erreur suivante: "le basculement d'erreur de type non capturé n'est pas une fonction". sur un élément à inspecter du navigateur. J'ai donc utilisé le code suivant et il a commencé à fonctionner pour moi.

$(".trigger").click(function () { $('.news').attr('style', 'display:none'); }

Fichier de script jquery utilisé avec la version: 'jquery-2.1.3.min.js ".

4
SRI

Si vous avez beaucoup d'éléments que vous souhaitez utiliser .hide() ou .show(), vous allez perdre beaucoup de ressources pour faire ce que vous voulez - même si vous utilisez .hide(0) ou .show(0) - le paramètre 0 correspond à la durée de l'animation.

Contrairement aux méthodes Prototype.js.hide() et .show() qui manipulaient uniquement l'attribut d'affichage de l'élément, l'implémentation de jQuery est plus complexe et non recommandé pour un grand nombre d’éléments.

Dans ce cas, vous devriez probablement essayer .css('display','none') pour masquer et .css('display','') pour afficher

.css('display','block') devrait être évité, surtout si vous travaillez avec des éléments en ligne, des rangées de tableau (en fait, n'importe quel élément de tableau), etc.

3
nmirceac

En considérant le commentaire de lolesque comme la meilleure réponse, vous pouvez ajouter un attribut ou une classe pour afficher/masquer les éléments dont les propriétés d’affichage sont différentes de celles dont il dispose normalement./afficher l'élément

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

Remplacez inline-block par la méthode d'affichage de votre choix et utilisez jquerys addclass https://api.jquery.com/addclass/ et removeclass https://api.jquery.com/removeclass / au lieu de show/hide, si la compatibilité avec les versions antérieures ne pose aucun problème, vous pouvez utiliser des attributs tels que celui-ci.

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

Et utilisez jquerys attr () http://api.jquery.com/attr/ pour afficher et masquer l'élément.

Quelle que soit la méthode que vous préférez, vous pouvez facilement implémenter des animations CSS3 en affichant/masquant des éléments de cette manière.

1
Anders M.