javascript - 切换显示 :none and display:block with JavaScript?

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>

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