jQuery nếu câu lệnh kiểm tra mức hiển thị

Question

Tôi đang cố gắng viết một tập lệnh sẽ ẩn/hiển thị div tùy thuộc vào khả năng hiển thị phần tử khác. Hành động sẽ diễn ra khi tôi nhấp vào phần tử khác. Dưới đây là những gì tôi đã viết cho đến thời điểm này:

$('#column-left form').hide(); 
    $('.show-search').click(function() { 
     $('#column-left form').stop(true, true).slideToggle(300); 
     if($('#column-left form').css('display') == 'none') { 
      $("#offers").show(); 
     } else { 
      $('#offers').hide(); 
     } 
    }); 

Nó ẩn div, nhưng nó không trở lại khi tôi ẩn biểu mẫu. Sẽ biết ơn sự giúp đỡ nào :)

chỉnh sửa:

Ok, tôi đã quản lý để đạt được hiệu quả mong muốn bằng cách viết này:

$('#column-left form').hide(); 
    $('.show-search').click(function() { 
     if ($('#column-left form').is(":hidden")) { 
      $('#column-left form').slideToggle(300); 
      $('#offers').hide(); 
     } else { 
      $('#column-left form').slideToggle(300); 
      $("#offers").show(); 
     } 
    }); 

Tôi không biết nếu nó được viết một cách chính xác nhưng nó hoạt động;) Cảm ơn tất cả mọi người để được giúp đỡ!

Answer 1

Bạn có thể sử dụng .is(':visible') để kiểm tra nếu có điều gì có thể nhìn thấy và .is(':hidden') để kiểm tra cho điều ngược lại:

$('#offers').toggle(!$('#column-left form').is(':visible')); // or: 
$('#offers').toggle($('#column-left form').is(':hidden')); 

tham khảo:

• http://api.jquery.com/is/
• http://api.jquery.com/visible-selector/
• http://api.jquery.com/hidden-selector/

Answer 2

thử

if ($('#column-left form:visible').length > 0) { ... 

Answer 3

$('#column-left form').hide(); 
$('.show-search').click(function() { 
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why 
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) { 
     $("#offers").show(); 
    } else { 
     $('#offers').hide(); 
    } 
    }); 

Answer 4

Có bạn có thể sử dụng .is(':visible') trong jquery. Nhưng khi mã đang chạy dưới trình duyệt Safari .is(':visible') sẽ không hoạt động.

Vì vậy, hãy sử dụng mã dưới đây

if($(".example").offset().top > 0) 

Dòng trên sẽ làm việc cả IE cũng như săn cũng có.

Answer 5

sau sửa chữa một vấn đề hiệu suất liên quan đến việc sử dụng các .là (": hữu hình"), tôi muốn giới thiệu với các câu trả lời trên và, thay vì sử dụng mã jQuery cho quyết định có một yếu tố duy nhất có thể nhìn thấy:

$.expr.filters.visible($("#singleElementID")[0]); 

Điều gì. Đó là kiểm tra xem một tập hợp các phần tử có nằm trong tập hợp các phần tử khác không. Vì vậy, bạn sẽ tìm kiếm phần tử của bạn trong toàn bộ các phần tử hiển thị trên trang của bạn. Có 100 phần tử là khá bình thường và có thể mất vài phần nghìn giây để tìm kiếm qua mảng các phần tử hiển thị. Nếu bạn đang xây dựng một ứng dụng web, bạn có thể có hàng trăm hoặc có thể hàng nghìn. Ứng dụng của chúng tôi đôi khi lấy 100ms cho $ ("# selector") là (": visible") vì nó đang kiểm tra nếu một phần tử nằm trong một mảng gồm 5000 phần tử khác.

Answer 6

nếu hiển thị.

$("#Element").is(':visible'); 

nếu nó bị ẩn.

$("#Element").is(':hidden');