Làm thế nào để ẩn một div bằng jQuery?

82

Khi tôi muốn ẩn HTML <div>, tôi sử dụng mã JavaScript sau:

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

Tương đương với mã đó trong jQuery là gì?

javascript jquery

— kamaci
nguồn

154

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

hoặc là

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

hoặc là

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

— Sujit Agarwal
nguồn

Thực ra cả ba đều giống nhau display:nonechỉ với ba hiệu ứng hoạt hình khác nhau. Câu trả lời chính xác là của @ honk31 .css("visibility", "hidden")và có mục đích! Không visiblity:hiddengiống như display:nonetiếp tục sử dụng không gian trong khi display:nonesẽ hoạt động như thể nó không bao giờ tồn tại ở đó.

— Nhà phát triển

1

@Developer Mặc dù một điểm thú vị và có khả năng hữu ích, nhưng tôi hoàn toàn không thấy có gì cho thấy giải pháp của bạn là hiệu quả mong muốn. Ngược lại, có vẻ như OP đã trả lời câu hỏi của họ khá tốt. Đối với mục đích của tôi, việc tiếp tục chiếm dụng không gian thực sự là điều không mong muốn. Đừng kiêu ngạo.

— donutguy640

Giống như chúng tôi đã từng nói trước RTFM. Trong bài đăng đầu tiên, một người hỏi sự khác biệt giữa khả năng hiển thị = "hidden" và display = "none", anh ta đã bao giờ hỏi cách tạo hoạt ảnh ẩn chưa? Ở lại chủ đề!

— Nhà phát triển

27

Dễ dàng:

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

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

— ctcherry
nguồn

27

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

sẽ đặt hiển thị css thành không. nếu bạn cũng cần đặt chế độ hiển thị thành ẩn, có thể thực hiện việc này thông qua

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

hoặc kết hợp cả hai trong một chuỗi

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

hoặc viết mọi thứ bằng một hàm css ()

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

— bấm còi31
nguồn

Câu trả lời này nên được chọn là một câu trả lời đúng, tôi không hiểu tại sao mọi người lại bình chọn cho câu trả lời sai hoàn toàn!

— Nhà phát triển

14

Nếu bạn muốn phần tử giữ không gian của nó thì bạn cần sử dụng,

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

Nếu bạn không muốn phần tử giữ lại không gian của nó, thì bạn có thể sử dụng,

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

hoặc đơn giản,

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

— kính đặc biệt
nguồn

7

$("myDiv").hide();và $("myDiv").show();không hoạt động tốt trong Internet Explorer.

Cách tôi giải quyết vấn đề này là lấy nội dung html để myDivsử dụng .html().

Sau đó, tôi đã viết nó vào một DIV mới được tạo. Sau đó, tôi đã nối DIV vào phần thân và nối nội dung của biến Contentvào HiddenFieldrồi đọc nội dung đó từ div mới được tạo khi tôi muốn hiển thị DIV.

Sau khi tôi sử dụng .remove()phương pháp để loại bỏ DIV đang tạm thời giữ các DIV html của tôi.

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

và sau đó khi tôi muốn HIỂN THỊ lại nội dung.

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

Điều này đáng tin cậy hơn rằng .hide()& .show()phương pháp.

— Cecil Theodore
nguồn

6

$('#myDiv').hide() sẽ ẩn div ...

— sajoshi
nguồn

2

$('#myDiv').hide(); Chức năng ẩn được sử dụng để chỉnh sửa nội dung và chức năng hiển thị được sử dụng để hiển thị lại.

Để biết thêm, vui lòng nhấp vào liên kết này .

— Nand Kishore Agarwal
nguồn