使用javascript顯示後隱藏div

Question

我正在使用javascript通過單擊按鈕顯示隱藏的div。顯示在div之後，我希望能夠再次單擊該按鈕，隱藏DIV，等等...

這裏是我的javascript：

<script type="text/javascript"> 
function showDiv() { 
    document.getElementById('dropdownText').style.display = "block"; 
} 
</script> 

這是按鈕：

<input type="button" name="answer" value="+" onclick="showDiv()" /> 

這是隱藏的div：

<div id="dropdownText" style="display:none;"> 
    This is the dropdown text. 
</div> 

Answer 1

你可以如將指定的類綁定到元素並將其切換。

function showDiv() { 
 
    document.getElementById('dropdownText').classList.toggle("hidden"); 
 
}

.hidden { 
 
    display: none; 
 
}

<input type="button" name="answer" value="+" onclick="showDiv()" /> 
 
This is the hidden div: 
 

 
<div id="dropdownText" class='hidden'> 
 
    This is the dropdown text. 
 
</div>

Answer 2

您只需要做到這一點：

const drop = document.getElementById('dropdownText') 
 

 
const toggleDropdown = _ => { 
 
    const cl = drop.classList 
 
    cl.contains('hide')?cl.remove('hide'):cl.add('hide') 
 
}

#dropdownText.hide {display:none} 
 

 

 
/* DropDown Styles for this demo */ 
 
#dropdownText {width: 10em; height: 4em; background: green}

<button onclick='toggleDropdown()'>Toggle Div</button> 
 
<div id='dropdownText'></div>

注：點擊Run Code Snippet在行動中看到的代碼。

---

它的工作方式是通過檢測是否有隱藏類此基礎上，撥動這個類。

實際隱藏和顯示是通過CSS完成的！

Answer 3

如果標記與jQuery這個問題爲好，所以我想你可以使用.toggle功能，這樣的 -

$('#answer').click(function() { 
    $('#dropdownText').toggle(); 
} 

如果你想用JavaScript只是，你showDiv（）函數來撅應該是這樣的 -

function showDiv() { 
    let text = document.getElementById('dropdownText'); 
    if (text.style.display === 'none') { 
     text.style.display = 'block'; 
    } 
    else { 
    text.style.display = 'none'; 
    } 
} 

你應該每一個按鈕被點擊時捕捉當前的風格，因爲你想「切換」回相反的狀態。

Answer 4

<div id="dropdownText" style="display:none"> 
This is the dropdown text. 
</div> 

<script type="text/javascript"> 

function showDiv() { 
    var x = document.getElementById('dropdownText'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
    } else { 
    x.style.display = 'none'; 
    } 
} 
</script>