Wie verstecke ich ein Div mit jQuery?

82

Wenn ich einen HTML- <div>Code ausblenden möchte , verwende ich den folgenden JavaScript-Code:

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

Was entspricht diesem Code in jQuery?

javascript jquery

— Kamaci
quelle

154

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

oder

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

oder

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

— Sujit Agarwal
quelle

Das sind eigentlich alle drei gleich display:nonemit nur drei verschiedenen Animationseffekten. Die richtige Antwort ist von @ honk31 .css("visibility", "hidden")und es gibt einen Zweck! Der visiblity:hiddenGegensatz display:nonehält Raum mit während display:noneverhält , wie es nie existiert.

— Entwickler

1

@Developer Obwohl dies ein interessanter und potenziell nützlicher Punkt ist, sehe ich absolut nichts, was darauf hindeutet, dass Ihre Lösung der gewünschte Effekt war. Im Gegenteil, es scheint, dass das OP es gefunden hat, um ihre Frage recht gut zu beantworten. Auch für meine Zwecke wäre es eigentlich ziemlich unerwünscht, den Raum weiter einzunehmen. Sei nicht arrogant.

— donutguy640

Wie wir vor RTFM gesagt haben. Im ersten Beitrag fragt eine Person, was der Unterschied zwischen Sichtbarkeit = "versteckt" und Anzeige = "keine" ist. Hat sie jemals gefragt, wie man eine versteckte Animation erstellt? Bleib beim Thema!

— Entwickler

27

Einfach:

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

http://api.jquery.com/hide/

— ctcherry
quelle

27

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

setzt die CSS-Anzeige auf keine. Wenn Sie die Sichtbarkeit ebenfalls auf "Versteckt" einstellen müssen, können Sie dies über tun

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

oder kombinieren Sie beide in einer Kette

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

oder schreibe alles mit einer css () Funktion

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

— honk31
quelle

Diese Antwort sollte als richtig ausgewählt werden. Ich habe keine Ahnung, warum die Leute für eine völlig falsche Antwort gestimmt haben!

— Entwickler

14

Wenn Sie möchten, dass das Element seinen Platz behält, müssen Sie Folgendes verwenden:

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

Wenn Sie nicht möchten, dass das Element seinen Platz behält, können Sie Folgendes verwenden:

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

oder einfach,

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

— Spezialbereich
quelle

7

$("myDiv").hide();und $("myDiv").show();funktioniert in Internet Explorer nicht so gut.

Die Art und Weise, wie ich das umging, bestand darin, den HTML-Inhalt der myDivVerwendung zu erhalten .html().

Ich habe es dann an einen neu erstellten DIV geschrieben. Ich habe dann den DIV an den Body angehängt und den Inhalt der Variablen Contentan den HiddenFielddann gelesenen Inhalt des neu erstellten Div angehängt, als ich den DIV anzeigen wollte.

Nachdem ich die .remove()Methode verwendet hatte, um den DIV loszuwerden, der vorübergehend meine DIVs html hielt.

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

und dann, als ich den Inhalt noch einmal zeigen wollte.

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

Dies war zuverlässiger als die .hide()& .show()Methoden.

— Cecil Theodore
quelle

6

$('#myDiv').hide() wird die div verstecken ...

— Sajoshi
quelle

2

$('#myDiv').hide(); Mit der Funktion "Ausblenden" wird der Inhalt bearbeitet und mit der Funktion "Anzeigen" wird erneut angezeigt.

Für mehr klicken Sie bitte auf diesen Link .

— Nand Kishore Agarwal
quelle