bật/tắt chế độ hiển thị của div

Question

Ok, tôi biết điều này đơn giản là bộ não của tôi không hoạt động chính xác ngay bây giờ. Tôi có một video html 5 trong một div. Sau đó tôi có một nút phát tùy chỉnh - hoạt động tốt. Tôi có khả năng hiển thị của video được đặt thành ẩn khi tải và hiển thị khi nút phát được nhấp, làm cách nào để trả lại video đó thành ẩn khi nút phát được nhấp lại?

<div id="video-over"> 
<video class="home-banner" id="video" controls=""> 
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> 
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> 
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> 
</video> 
</div> 

    <button type="button" id="play-pause" onclick="showVid();"> 
    <img class="img-home-apply" src="/wp-content/images/apply-pic.png" alt="Apply Now"> 
    </button> 



<script type="text/javascript" > 
function showVid(){ 
document.getElementById('video-over').style.visibility='visible'; 
} 
</script> 



#video-over{ 
visibility: hidden; 
background-color: rgba(0,0,0,.7) 
} 

Về cơ bản, tôi chỉ cố chuyển đổi giữa hai trạng thái hiển thị và ẩn ngoại trừ tôi không thể sử dụng chuyển đổi vì chương trình đó và ẩn div. Tôi cần nó ở đó, chỉ cần ẩn, vì vậy nó duy trì chiều cao chính xác.

Answer 1

Sử dụng jQuery:

$('#play-pause').click(function(){ 
    if ($('#video-over').css('visibility') == 'hidden') 
    $('#video-over').css('visibility','visible'); 
    else 
    $('#video-over').css('visibility','hidden'); 
}); 

Answer 2

Tôi biết đây là một câu hỏi cũ nhưng tôi đi qua nó nghiên cứu một vấn đề khác nhau.

Theo tài liệu jquery gọi chuyển đổi() mà không có thông số sẽ chuyển đổi chế độ hiển thị.

$('#play-pause').click(function(){ 
     $('#video-over').toggle(); 
    }); 

http://jsfiddle.net/Q47ya/

Answer 3

Có một cách khác để làm điều này chỉ với JavaScript. Tất cả những gì bạn phải làm là chuyển đổi chế độ hiển thị dựa trên trạng thái hiện tại của khả năng hiển thị của DIV trong CSS.

Ví dụ:

function toggleVideo() { 
    var e = document.getElementById('video-over'); 

    if(e.style.visibility == 'visible') { 
      e.style.visibility = 'hidden'; 
    } else if(e.style.visibility == 'hidden') { 
      e.style.visibility = 'visible'; 
    } 
}