在放映后隐藏潜水

Question

所以到目前为止，当你点击一个图像时，它会显示一个div。我只需要它，这样当你再次点击图像并显示div时，它就会隐藏起来。

这是我的代码：

样式和脚本

<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
function showImg()
{
var obj=document.getElementById('calcShow');
obj.className = 'show';
}
</script>

这是HTML

<li data-value="iconchange"><img src="modules/icons/icons/calculator.png" width="65"  onclick = "showImg()" class="calculator"></li> &nbsp;

Div

<div id="calcShow" class="hide"><br><br><br>
<?php
include("modules/calc/calc.html");
?>
</div>

Answer 1

您要做的是创建一个条件，检查当前是否显示<div>。根据可见性，更改与<div>:关联的类

function toggleImg() {
var obj = document.getElementById('calcShow');
if (obj.className == 'show') {
obj.className = 'hide';
}
else if (obj.className == 'hide') {
obj.className = 'show';
}
}

.show {
display: block;
}
.hide {
display: none;
}

<div id="calcShow" class="hide">Hidden</div>
<br />
<img src="http://placehold.it/100" onclick="toggleImg()">

请注意，您实际上不必为此使用类，因为这可以通过.style.display属性直接完成：

function toggleImg() {
var obj = document.getElementById('calcShow');
if (obj.style.display == 'none') {
obj.style.display = 'block';
}
else if (obj.style.display == 'block') {
obj.style.display = 'none';
}
}

<div id="calcShow" style="display: block">Hidden</div>
<br />
<img src="http://placehold.it/100" onclick="toggleImg()">

希望这能有所帮助！：(

Answer 2

Jquery解决方案：

HTML：

<li data-value="iconchange"><img src="modules/icons/icons/calculator.png" width="65" class="calculator"></li> &nbsp;

DIV：

<div id="calcShow"><br><br><br>
<?php
include("modules/calc/calc.html");
?>
</div>

功能：

$('.calculator').click(function{
var isvisible = $('#calcShow').is(":visible"); 
if(isvisible == true){
$('#calcShow').hide();
}
else{
$('#calcShow').show();
}
})

Answer 3

这基本上是使用纯javascript、的最简单方法之一

function showImage(){
var obj = document.getElementById('calcShow');
if(obj.style.display !== "block"){
obj.style.display = "block";  
}else{
obj.style.display = "none";
}
}

Answer 4

您可以创建一个切换值的函数，而不是创建单独的函数来显示和隐藏图像。您可以使用三元运算符来决定是要将className设置为show还是hide。

三元运算符的工作原理是这样的，condition ? ifTrue : ifFalse。

条件为obj.className === "show"。如果这是真的，那么它应该从当前值"show"切换到值"hide"。然而，如果它是false，那么它的当前值是"隐藏"的，因此它的新值应该设置为"true"。

function showOrHide() {
var obj = document.getElementById('calcShow');
obj.className = (obj.className === "show" ? "hide" : "show");
}

然后，您可以简单地设置onClick属性来调用此函数。