切换 div 的可见性属性答案

【问题标题】：Toggle visibility property of div切换 div 的可见性属性
【发布时间】：2013-08-05 17:21:29
【问题描述】：

我在 div 中有一个 HTML 5 视频。然后我有一个自定义播放按钮 - 效果很好。
而且我将视频的可见性设置为在加载时隐藏并在单击播放按钮时可见，当再次单击播放按钮时如何将其恢复为隐藏状态？

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。我需要它，只是隐藏起来，所以它保持正确的高度。

【问题讨论】：

标签： javascript jquery css toggle show-hide

【解决方案1】：

使用 jQuery：

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

【讨论】：

谢谢...我只是浪费了半个小时的生命。我的头只是自动转到“onclick”，因为我正在使用一个按钮。对此，我真的非常感激！ @tb11
您可以使用onclick。您只需要将切换逻辑放在showVid() 函数中。好吧，那将是一个toggleVid() 函数。
$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' ： '隐藏');
仅供参考可见性和显示的工作方式不同。显示分层应用于内部 div，而可见性在某些情况下不适用。显示也是一样的：$('#ivideo-over').css('display', $('#ivideo-over').css('display') == 'none' ? 'block' : 'none');
很好的答案，但我也建议使用带有 none/block 选项的显示属性。可见性将“保留” div 的空间，具体取决于您的 UI，它可能看起来不太好。 display 属性将其视为不存在，因此您的 UI 不会受到影响，直到......它确实......

【解决方案2】：

根据 jQuery 文档，不带参数调用 toggle() 将切换可见性。

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

http://jsfiddle.net/Q47ya/

【讨论】：

注意 css 属性 'visibility' 和 'display' 之间的区别。 'toggle()' 改变了 'display' 属性，它将隐藏元素并使空间对其他元素“可用”，而使用 'visibility' 元素继续占据空间。正如 OP 在最后一句话中所说，这就是为什么 'toggle()' 在这里不起作用
“根据 jquery 文档，不带参数调用 toggle() 将切换可见性。”不，它没有。可见性和显示是两个不同的东西，切换在显示上起作用，而不是可见性。
如果你想操纵服务器端内容display :none 不是一个选项toggle() 将不起作用

【解决方案3】：

还有另一种只使用 JavaScript 的方法。您所要做的就是根据 DIV 在 CSS 中的可见性的当前状态切换可见性。

例子：

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';
     }
}

【讨论】：

【解决方案4】：

要稍微清理一下并维护一行代码（就像使用 toggle() 一样），您可以使用 ternary operator，这样您的代码最终看起来像这样（也使用 jQuery）：

$('#video-over').css('visibility', $('#video-over').css('visibility') == 'hidden' ? 'visible' : 'hidden');

【讨论】：

【解决方案5】：

要使用 $.fadeIn() 和 $.fadeOut() 之类的效果，您可以使用过渡

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

【讨论】：

【解决方案6】：

最好像这样检查可见性： if($('#video-over').is(':visible'))

【讨论】：

【解决方案7】：

$.fn.toggleVisibility = function (state) {
    return this.each(function () {
        $(this).css("visibility", state ? "visible" :
            (state === false ? "hidden" :
                $(this).css("visibility") === "hidden" ? "visible" : "hidden"));
    });
};

然后

$('#video-over').toggleVisibility();

或

$('#video-over').toggleVisibility(true);

或

$('#video-over').toggleVisibility(false);

【讨论】：