jQuery & CSS - Xóa / Thêm hiển thị: không có

Tôi có một div với lớp này:

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

Và tôi muốn với một số phương thức jQuery loại bỏ hiển thị đó: none; (vì vậy div sẽ hiển thị) và hơn thêm nó một lần nữa (vì vậy div sẽ đổ bóng).

Tôi làm nó như thế nào? Chúc mừng

Để ẩn div

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

hoặc là

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

và để hiển thị div:

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

hoặc là

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

jQuery cung cấp cho bạn:

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

Sau đó, bạn có thể dễ dàng hiển thị và ẩn (các) phần tử.

Vì vậy, hãy để tôi cung cấp cho bạn mã mẫu:

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

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

Liên kết sẽ là trình kích hoạt để hiển thị div khi được nhấp vào. Vì vậy, Javascript của bạn sẽ là:

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

Bạn hầu như luôn luôn tốt hơn nên để jQuery xử lý việc tạo kiểu cho các phần tử ẩn và hiển thị.

Chỉnh sửa: Tôi thấy những người ở trên đang giới thiệu sử dụng .showvà .hidecho điều này. .togglecho phép bạn làm cả hai chỉ với một hiệu ứng. Thật tuyệt.

Trong JavaScript:

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

Trong jQuery:

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

Sử dụng chuyển đổi để hiển thị và ẩn.

$('#mydiv').toggle()

Kiểm tra ví dụ làm việc tại http://jsfiddle.net/jNqTa/

tôi khuyên bạn nên thêm một lớp để hiển thị / ẩn các phần tử:

.hide { display:none; }

và sau đó sử dụng .toggleClass () của jquery để hiển thị / ẩn phần tử:

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

Cách duy nhất để xóa nội tuyến "display: none" qua css-api của jQuery là đặt lại nó bằng chuỗi trống ( nullKHÔNG hoạt động btw !!).

Theo tài liệu jQuery, đây là cách chung để "loại bỏ" thuộc tính kiểu nội tuyến đã được thiết lập một lần.

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

hoặc là

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

nên làm đúng thủ thuật.

IMHO có một phương thức bị thiếu trong jQuery có thể được gọi là "unhide" hoặc "Reveal" mà thay vì chỉ đặt thuộc tính kiểu nội tuyến khác sẽ không đặt giá trị hiển thị đúng như mô tả ở trên. Hoặc có thể hide()nên lưu trữ giá trị nội tuyến ban đầu và show()nên khôi phục lại ...

Các hàm .show () và .hide () của jQuery có lẽ là lựa chọn tốt nhất của bạn.

Bạn không cung cấp cho chúng tôi nhiều thông tin nhưng nói chung đây có thể là một giải pháp:

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

Vì một số lý do, chuyển đổi không hoạt động với tôi và tôi đã nhận được lỗi uncaught type error toggle is not a functionkhi kiểm tra phần tử trong trình duyệt. Vì vậy, tôi đã sử dụng đoạn mã sau và nó bắt đầu hoạt động với tôi.

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

Tập tin script jquery đã sử dụng jquery-2.1.3.min.js.

Nếu bạn có nhiều yếu tố bạn muốn .hide()hoặc .show(), bạn sẽ lãng phí rất nhiều tài nguyên để làm những gì bạn muốn - ngay cả khi sử dụng .hide(0)hoặc .show(0)- tham số 0 là thời lượng của hoạt ảnh.

Trái ngược với Prototype.js .hide() và .show()các phương thức chỉ được sử dụng để thao tác thuộc tính hiển thị của phần tử, việc triển khai của jQuery phức tạp hơn và không được khuyến nghị cho một số lượng lớn phần tử.

Trong trường hợp này, bạn có thể nên cố gắng .css('display','none')ẩn và .css('display','')hiện

.css('display','block') nên tránh, đặc biệt nếu bạn đang làm việc với các phần tử nội tuyến, hàng bảng (thực tế là bất kỳ phần tử bảng nào), v.v.

Xem xét nhận xét của lolesque để trả lời tốt nhất, bạn có thể thêm một thuộc tính hoặc một lớp để hiển thị / ẩn các phần tử có thuộc tính hiển thị khác với những gì nó thường có, nếu trang web của bạn cần tính tương thích ngược, tôi khuyên bạn nên tạo một lớp và thêm / xóa nó để hiển thị / hiển thị phần tử

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

.news-hide {
display:none;
}

Thay thế nội tuyến bằng phương pháp hiển thị ưa thích của bạn mà bạn chọn và sử dụng jquerys addclass https://api.jquery.com/addclass/ và removeclass https://api.jquery.com/removeclass/ thay vì show / hide, nếu ngược khả năng tương thích là không có vấn đề, bạn có thể sử dụng các thuộc tính như thế này.

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

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

Và sử dụng jquerys attr () http://api.jquery.com/attr/ để hiển thị và ẩn phần tử.

Cho dù bạn thích phương pháp nào thì nó cũng giúp bạn có thể dễ dàng triển khai hoạt ảnh css3 khi hiển thị / ẩn các phần tử theo cách này

Sử dụng show()bổ sung display:blockthay thế cho display:hidenhững thứ có thể phá vỡ mọi thứ.

Để tránh điều đó, bạn có thể có một lớp với thuộc tính display:nonevà chuyển đổi lớp đó cho phần tử đó với 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>

Không có câu trả lời nào đề cập đến điều này.