Jak ukryć div za pomocą jQuery?

83

Kiedy chcę ukryć HTML <div>, używam następującego kodu JavaScript:

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

Jaki jest odpowiednik tego kodu w jQuery?

javascript jquery

— kamaci
źródło

154

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

lub

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

lub

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

— Sujit Agarwal
źródło

W rzeczywistości wszystkie trzy są takie same, display:nonetylko z trzema różnymi efektami animacji. Prawidłowa odpowiedź to @ honk31 .css("visibility", "hidden")i jest cel! W visiblity:hiddenprzeciwieństwie do tego, display:nonenadal wykorzystuje przestrzeń, podczas gdy display:nonebędzie się zachowywać tak, jakby nigdy tam nie istniała.

— Deweloper

1

@Developer Chociaż jest to ciekawy i potencjalnie przydatny punkt, nie widzę absolutnie nic wskazującego, że Twoje rozwiązanie przyniosło oczekiwany efekt. Wręcz przeciwnie, wydaje się, że PO uznał to za całkiem dobrą odpowiedź na ich pytanie. Również dla moich celów dalsze zajmowanie miejsca byłoby właściwie niepożądane. Nie bądź arogancki.

— donutguy640

Jak mówiliśmy przed RTFM. We wstępnym poście ktoś pyta, jaka jest różnica między visibility = "hidden" i display = "none", czy kiedykolwiek zapytał, jak zrobić animację ukrywania? Trzymaj się tematu!

— Deweloper

27

Łatwy:

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

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

— ctcherry
źródło

27

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

ustawi wyświetlanie css na none. jeśli chcesz również ustawić widoczność jako ukrytą, możesz to zrobić za pomocą

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

lub połącz oba w łańcuch

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

lub napisz wszystko jedną funkcją css ()

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

— honk31
źródło

Ta odpowiedź powinna być wybrana jako poprawna, nie mam pojęcia, dlaczego ludzie głosowali na całkowicie złą odpowiedź!

— Deweloper

14

Jeśli chcesz, aby element zachował swoją przestrzeń, musisz użyć,

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

Jeśli nie chcesz, aby element zachował swoją przestrzeń, możesz użyć,

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

lub po prostu,

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

— zakres specjalny
źródło

7

$("myDiv").hide();i $("myDiv").show();nie działa tak dobrze w przeglądarce Internet Explorer.

Sposób, w jaki sobie z tym poradziłem, polegał na uzyskaniu zawartości HTML z myDivusing .html().

Następnie napisałem go do nowo utworzonego DIV. Następnie dołączyłem DIV do treści i dołączyłem zawartość zmiennej Contentdo, a HiddenFieldnastępnie przeczytałem tę zawartość z nowo utworzonego DIV, gdy chciałem wyświetlić DIV.

Po tym, jak użyłem .remove()metody, aby pozbyć się DIV, który tymczasowo wstrzymywał mój DIV html.

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

a potem, gdy chciałem ponownie POKAZAĆ zawartość.

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

Było to bardziej niezawodne niż metody .hide()& .show().

— Cecil Theodore
źródło

6

$('#myDiv').hide() ukryje div ...

— sajoshi
źródło

2

$('#myDiv').hide(); Funkcja hide służy do edycji treści, a funkcja show służy do ponownego wyświetlania.

Aby uzyskać więcej informacji, kliknij ten link .

— Nand Kishore Agarwal
źródło