切换div的可见性属性 [英] Toggle visibility property of div

问题描述

我在div中有一个HTML 5视频。然后我有一个自定义播放按钮 - 工作正常。

我将视频的可见性设置为隐藏在加载时，并且在单击播放按钮时可见，如何在播放按钮时将其返回到隐藏状态再次点击？

I have an HTML 5 video in a div. I then have a custom play button - that works fine.
And I have the video's visibility set to hidden on load and visible when the play button is clicked, how do I return it to hidden when the play button is clicked again?

function showVid() {
  document.getElementById('video-over').style.visibility = 'visible';
}

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

<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>

我基本上只想尝试切换它在可见和隐藏的两种状态之间，除了我不能使用切换，因为该显示和隐藏div。我需要它，只是隐藏，所以它保持正确的高度。

I'm basically just trying to toggle it between the two states of visible and hidden except I can't use toggle because that show's and hides the div. I need it there, just hidden, so it maintains the correct height.

推荐答案

使用jQuery：

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

这篇关于切换div的可见性属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！