jQuery & CSS - Anzeige entfernen / hinzufügen: keine

Ich habe eine Div mit dieser Klasse:

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

Und ich möchte mit einigen jQuery-Methoden diese Anzeige entfernen: keine; (so wird das Div angezeigt) und dann erneut hinzufügen (so wird das Div Schatten).

Wie kann ich es tun? Prost

Um das zu verstecken div

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

oder

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

und um das zu zeigen div:

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

oder

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

jQuery bietet Ihnen:

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

Sie können die Elemente dann einfach ein- und ausblenden.

Lassen Sie mich Ihnen einen Beispielcode geben:

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

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

Der Link ist der Auslöser, um das Div anzuzeigen, wenn Sie darauf klicken. Ihr Javascript lautet also:

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

Es ist fast immer besser, wenn Sie jQuery das Styling zum Ausblenden und Anzeigen von Elementen überlassen.

Bearbeiten: Ich sehe, dass die Leute oben empfehlen, .showund .hidedafür zu verwenden. .toggleermöglicht es Ihnen, beides mit nur einem Effekt zu tun. Das ist cool.

In JavaScript:

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

In jQuery:

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

Verwenden Sie den Schalter zum Ein- und Ausblenden.

$('#mydiv').toggle()

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/jNqTa/

Ich würde vorschlagen, eine Klasse hinzuzufügen, um Elemente anzuzeigen / auszublenden:

.hide { display:none; }

Verwenden Sie dann .toggleClass () von jquery , um das Element anzuzeigen / auszublenden:

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

Die einzige Möglichkeit, eine Inline-Anzeige "display: none" über die CSS-API von jQuery zu entfernen, besteht darin, sie mit der leeren Zeichenfolge zurückzusetzen ( nullfunktioniert übrigens NICHT !!).

Laut dem jQuery-Dokument ist dies die allgemeine Methode, um eine einmal festgelegte Inline-Stileigenschaft zu "entfernen".

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

oder

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

sollte den Trick richtig machen.

IMHO fehlt in jQuery eine Methode, die als "Einblenden" oder "Aufdecken" bezeichnet werden kann. Statt nur eine andere Inline-Stileigenschaft festzulegen, wird der Anzeigewert wie oben beschrieben ordnungsgemäß deaktiviert. Oder hide()sollte vielleicht den anfänglichen Inline-Wert speichern und diesen show()wiederherstellen ...

Die Funktionen .show () und .hide () von jQuery sind wahrscheinlich die beste Wahl.

Sie geben uns nicht viele Informationen, aber im Allgemeinen könnte dies eine Lösung sein:

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

Aus irgendeinem Grund funktionierte das Umschalten bei mir nicht und ich erhielt den Fehler uncaught type error toggle is not a functionbeim Überprüfen des Elements im Browser. Also habe ich den folgenden Code verwendet und er hat bei mir funktioniert.

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

Verwendete JQuery-Skriptdatei jquery-2.1.3.min.js.

Wenn Sie viele Elemente haben, die Sie möchten .hide()oder möchten .show(), werden Sie viele Ressourcen verschwenden, um das zu tun, was Sie wollen - auch wenn Sie verwenden .hide(0)oder .show(0)- der 0-Parameter ist die Dauer der Animation.

Im Gegensatz zu Prototype.js .hide() und .show()Methoden, mit denen nur das Anzeigeattribut des Elements bearbeitet wurde , ist die Implementierung von jQuery komplexer und wird für eine große Anzahl von Elementen nicht empfohlen.

In diesen Fällen sollten Sie wahrscheinlich versuchen .css('display','none'), sich zu verstecken und .css('display','')zu zeigen

.css('display','block') sollte vermieden werden, insbesondere wenn Sie mit Inline-Elementen, Tabellenzeilen (eigentlich allen Tabellenelementen) usw. arbeiten.

Wenn Sie den Kommentar von lolesque als beste Antwort betrachten, können Sie entweder ein Attribut oder eine Klasse hinzufügen, um Elemente mit Anzeigeeigenschaften anzuzeigen / auszublenden, die sich von den normalen Eigenschaften unterscheiden. Wenn Ihre Site Abwärtskompatibilität benötigt, würde ich vorschlagen, eine Klasse zu erstellen und sie zum Anzeigen hinzuzufügen / zu entfernen Ich zeige das Element an

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

.news-hide {
display:none;
}

Ersetzen Sie den Inline-Block durch eine bevorzugte Anzeigemethode Ihrer Wahl und verwenden Sie jquerys addclass https://api.jquery.com/addclass/ und removeclass https://api.jquery.com/removeclass/ anstelle von show / hide, falls rückwärts Kompatibilität ist kein Problem. Sie können solche Attribute verwenden.

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

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

Verwenden Sie jquerys attr () http://api.jquery.com/attr/ , um das Element anzuzeigen und auszublenden.

Unabhängig davon, welche Methode Sie bevorzugen, können Sie CSS3-Animationen einfach implementieren, wenn Sie Elemente auf diese Weise ein- oder ausblenden

Verwenden von show()Adds display:blockanstelle vondisplay:hide Adds kann zu Problemen führen.

Um dies zu vermeiden, können Sie eine Klasse mit Eigenschaft haben display:noneund diese Klasse für dieses Element mit umschalten 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>

Keine der Antworten erwähnte dies.