今天我有一個id為listbtn的一個div一個id為textlist的div，我讓listbtn這個div作為一個按鈕來使用，我想讓他做的事情很簡單，當textlist是秀出來的狀態時按一下listbtn後textlist要變成隱藏狀態，相反的，如果textlist是隱藏狀態時按一下listbtn後textlist要秀出來，我可以用甚麼方法去判斷textlist當下狀態為隱藏或秀出來?
<div id="listBtn" onclick="listBtn()"></div>
<div id="textlistn" style="display:none;">
<div></div>
<div></div>
......
</div>
已邀請的邦友 {{ invite_list.length }}/5
使用style.display的值來做判斷,是否要顯示
<div id="listBtn" onclick="listBtn()">秀出來</div>
<div id="textlistn" style="display:none;">
Hello IT邦
</div>
<script>
function listBtn() {
var listBtn = document.getElementById('listBtn');
var textlistn = document.getElementById('textlistn');
if (textlistn.style.display === 'none') {
textlistn.style.display = 'block';
listBtn.innerText = "隱藏";
} else {
textlistn.style.display = 'none';
listBtn.innerText = "秀出來";
}
}
</script>
jQuery hide() 和 show() : 隱藏和顯示
jQuery toggle() : 切換隱藏與顯示
您已設置其中一個為隱藏了，我接續下去~~
$('#listBtn').click(function(){
$("#textlistn").toggle();
});
$('#textlistn').click(function(){
$("#listBtn").toggle();
});
const listBtn = document.getElementById('listBtn');
const textlistn = document.getElementById('textlistn');
listBtn.addEventListener('click', (e) => {
textlistn.style.display =
textlistn.style.display === 'none'
? ''
: 'none';
});
iThome鐵人賽
看影片追技術