製作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隱藏後顯示

回答

相關問題