Divを表示した後に非表示にする

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 id="calcShow" class="hide"><br><br><br> 
    <?php 

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

Answer 1

されています条件を作成する<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()">

注：可視性に応じて、<div>に関連付けられているクラスを変更.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()">

これは役に立ちます。 jQueryを使って:)

Answer 2

ソリューション：

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> 

機能：

これは、基本的には純粋なJavaScriptを使用して最も簡単な方法の一つである

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

Answer 3

、

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に設定するかどうかを決定できます。

3者演算子は、condition ? ifTrue : ifFalseのように動作します。

条件はobj.className === "show"です。これが真であれば、現在の "show"の値から "hide"の値に切り替える必要があります。ただし、falseの場合、現在の値は "hide"なので、新しい値は "true"に設定する必要があります。

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

次に、この機能を呼び出すonClick属性を設定できます。