制作Div隐藏后显示

所以我到目前为止，当你点击一个图像它显示一个Div。我只是需要它，所以当你再次点击图像并显示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 id="calcShow" class="hide"><br><br><br> 
    <?php 

        include("modules/calc/calc.html"); 
    ?> 
    </div>

来源

2017-08-30 Dalton Metzler

只要检查'display'是否在块上，如果是这样就给它'none'元素，或者只是使用你创建的类来完成。 –

我该怎么做呢？ @MartijnEbbens –

你想要做的是什么创建一个条件检查当前是否显示<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()">

希望这有助于！ :)

来源

2017-08-30 00:28:36

作品完美！非常感谢！一旦它允许我，我会批准这个帖子。 –

没问题;很高兴帮忙=] –

解决方案使用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(); 
    } 
})

来源

2017-08-30 00:30:30

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

function showImage(){ 
    var obj = document.getElementById('calcShow'); 

    if(obj.style.display !== "block"){ 
     obj.style.display = "block"; 
    }else{ 
     obj.style.display = "none"; 
    } 
    }

来源

2017-08-30 00:31:59

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

三元运算符就像这样工作，condition ? ifTrue : ifFalse。

条件将是obj.className === "show"。如果这是真的，那么它应该从当前的“显示”值切换到“隐藏”值。但是，如果它是假的，那么它的当前值是“隐藏”，因此它的新值应该设置为“真”。

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

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

来源

2017-08-30 00:32:01 Max

制作Div隐藏后显示

回答

相关问题