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>：

关联的类

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！：）

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”。但是，如果它是假的，那么它的当前值是“隐藏”，所以它的新值应该设置为“true”。

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

然后你可以简单地设置onClick属性来调用这个函数。

在显示之后使Div隐藏

4 个答案: