Question

所以，我的目标是制作我的第一个div

<a href="#" onclick="showVideo1()">
<div style="width:42.5%; height:50%; position:absolute; top:5%; left:5%;     background:black;" onclick="toggle_visibility('video1');">
<video style="width:100%; height:100%" autoplay="autoplay" loop="true" muted>
<source src="http://www.techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
</a>

更改div2的显示

<div class="hiddiv" id="video1">
<div class="vidcont">
<video style="width:100%; height:100%;">
<source src="http://www.techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
</div>

点击时。为此，我使用了这一点JS

<script type="text/javascript">
 function showVideo1() {
 document.getElementById('video1').style.display = "block";
 }
</script>`

它的工作原理我想要它，但现在我需要它，所以当我点击div2时，它会变回隐藏状态。我该怎么做？

Answer 1

你可以创建另一个隐藏它的功能

<div class= "hiddiv" id="video1" onclick="hideVideo()">
...
</div>

<script type="text/javascript">
 function hideVideo() {
 document.getElementById('video1').style.display = "none";
 }
</script>

您还可以创建一个函数来切换类（可见/隐藏）。

使用JavaScript在display：none和display：block之间切换？

1 个答案: