当前位置: 首页 > 面试题库 >

切换div的可见性属性

耿炎彬
2023-03-14
问题内容

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

我基本上只是想在可见和隐藏的两种状态之间切换,除非我不能使用切换,因为那是show的隐藏div。我需要在那里,只是隐藏起来,所以它保持正确的高度。


问题答案:

使用jQuery:

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


 类似资料:
  • 问题内容: 以下是我的javascript代码,我曾经在单击时显示。 再次单击该如何隐藏?然后单击它,是否应该再次可见? 问题答案: 如果您对jQuery解决方案感兴趣: 这是HTML 这是jQuery脚本 您可以在这里看到它的工作方式: 如果您不知道如何使用jQuery,则必须使用以下代码来加载库: 然后使用此行开始: 因此,在这种情况下,最终代码如下:

  • 问题内容: 我用这段代码通过按钮浏览了panel1和panel2。 (button1和button2),但是当我运行代码时,框架保持空白。 有人可以向我解释我做错了什么以及如何完成 以这种方式在panel1和panel2之间切换?首先从panel1开始 码: 提前致谢 问题答案: 使用布局管理器。 frame.setLayout(new FlowLayout());

  • 问题内容: 显示属性和可见性属性之间有何区别? 问题答案: 该属性仅告诉浏览器是否显示元素。它是可见的(-您可以看到)或不可见的(-您看不到)。 该属性告诉浏览器 如何 绘制和显示元素(如果有的话)-是将其显示为元素(即,与文本和其他内联元素一起流动)还是-level元素(即,具有height和width属性,你可以设置,它的浮动等),或(即它的作用就像一个黑匣子,但奠定了直列代替)和其他一些人(

  • 以前我使用过的ORM将数据库列直接映射到类属性,这允许您查看特定的属性可见性,就像您通常会限制对某些属性(例如密码)的访问一样。 有了雄辩,我似乎无法复制这一点,因为数据库列映射到不包含可见性的内部属性数组。 我的愿望是将用户密码的访问范围仅限于对象,即私有。 设置具有可见性的类属性不起作用,因为该属性超出了雄辩模型属性的范围,因此该属性未映射到列。 雄辩的$隐藏和$保护属性不起作用,因为它们处理

  • GridViewColumnExt是从GridViewColumn继承并添加可见性属性的类。 您可能会看到,我的ListView的ItemsSource被设置为寄存器ObservableCollection。Register类有一个名为vis的bool类型的属性。对于TextBox来说,这一切都很好,但是从GridViewColumnExt don来看,我认为我无法到达集合并绑定到特定的对象。 我

  • 所以我有下面的代码,用Kotlin写的。 我在最后一条指令行()上得到一个编译错误,编译器说,但我不知道为什么。 我认为同伴对象应该对它们“陪伴”的类的属性具有某种可见性。 (免责声明:此代码正在从Java迁移到Kotlin。在Java版本上,以前是同一个类上的静态方法。) 多谢!