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; (donc le div sera affiché) et ensuite l'ajouter à nouveau (donc le div sera ombré).

Comment puis-je le faire? À votre santé

Pour cacher le div

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

ou

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

et pour montrer div:

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

ou

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

jQuery vous fournit:

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

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

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 afficher le 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 masquer et afficher les éléments.

Edit: Je vois que les gens ci-dessus recommandent d'utiliser .showet .hidepour cela. .togglevous permet de faire les deux avec un seul effet. Alors c'est cool.

En JavaScript:

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

Dans jQuery:

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

Utilisez la bascule pour afficher et masquer.

$('#mydiv').toggle()

Vérifiez l'exemple de travail sur http://jsfiddle.net/jNqTa/

Je suggère d'ajouter une classe pour afficher / masquer les éléments:

.hide { display:none; }

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

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

La seule façon de supprimer un "display: none" en ligne via le css-api de jQuery est de le réinitialiser avec la chaîne vide ( nullne fonctionne PAS btw !!).

Selon le document jQuery, c'est la manière générale de "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 y a une méthode manquante dans jQuery qui pourrait être appelée "unhide" ou "révéler" qui au lieu de simplement définir une autre propriété de style en ligne annule correctement la valeur d'affichage comme décrit ci-dessus. Ou peut-être hide()devrait stocker la valeur initiale en ligne et show()devrait restaurer cela ...

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

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

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

Pour une raison quelconque, la bascule ne fonctionnait pas pour moi et j'ai reçu l'erreur uncaught type error toggle is not a functionlors de l'inspection de l'élément dans le navigateur. J'ai donc utilisé le code suivant et cela a commencé à fonctionner pour moi.

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

Fichier de script jquery utilisé jquery-2.1.3.min.js.

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

Contrairement à Prototype.js .hide() et aux .show()méthodes qui utilisaient uniquement pour manipuler l'attribut d'affichage de l'élément, l'implémentation de jQuery est plus complexe et déconseillée pour un grand nombre d'éléments.

Dans ce cas, vous devriez probablement essayer .css('display','none')de cacher et .css('display','')d'afficher

.css('display','block') doit être évité, en particulier si vous travaillez avec des éléments en ligne, des lignes de tableau (en fait des éléments de tableau), etc.

Considérant que le commentaire de lolesque est la meilleure réponse, vous pouvez ajouter un attribut ou une classe pour afficher / masquer des éléments avec des propriétés d'affichage qui diffèrent de ce qu'il a normalement, si votre site a besoin d'une compatibilité descendante, je suggérerais de créer une classe et de l'ajouter / de la supprimer pour afficher / afficher l'élément

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

.news-hide {
display:none;
}

Remplacez inline-block par votre méthode d'affichage préférée 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 en arrière la compatibilité n'est pas un problème, vous pouvez utiliser des attributs comme 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, cela vous permet d'implémenter facilement des animations css3 lorsque vous affichez / masquez des éléments de cette façon

Utiliser des show()ajouts display:blockà la place de display:hidequi pourrait casser des choses.

Pour éviter cela, vous pouvez avoir une classe avec propriété display:noneet basculer cette classe pour cet élément avec toggleClass().

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

Aucune des réponses n'a mentionné cela.