今天我有一個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=";">
    <div></div>
    <div></div>
    ......
                        onclick="document.getElementById('textlistn').style.display=(document.getElementById('textlistn').style.display=='none')?'block':'none';"
<script>

var listBtn=function(){

	document.getElementById('textlistn').style.display=(document.getElementById('textlistn').style.display=='none')?'block':'none';

</script>
<script>
var listBtn=function(){
	document.getElementById('textlistn').style.display=(document.getElementById('textlistn').style.display=='none')?'block':'none';
</script>
                            onclick="document.getElementById('textlistn').style.display=(document.getElementById('textlistn').style.display=='none')?'block':'none';"

這段我看不太懂在做甚麼
                        onclick="document.getElementById('textlistn').style.display=(document.getElementById('textlistn').style.display=='none')?'block':'none';"
這段我看不太懂在做甚麼
                            當物件被點擊時 判斷 id為textlistn的style.display是否為'none'，是的話就把style.display變成'block'，否的話就變成'none'

可以分三段來看

1.  onclick="..."

2.  document.getElementById('textlistn').style.display=

3. (條件是否成立)?'成立返回值':'不成立返回值'

我只是把 1 2 3 寫成一行  (三元運算子很好用)
                        當物件被點擊時 判斷 id為textlistn的style.display是否為'none'，是的話就把style.display變成'block'，否的話就變成'none'
可以分三段來看
1.  onclick="..."
2.  document.getElementById('textlistn').style.display=
3. (條件是否成立)?'成立返回值':'不成立返回值'
我只是把 1 2 3 寫成一行  (三元運算子很好用)
                        我這裡幫你把行內樣式跟行內點擊事件給分離出來，然後利用 jQuery 配合 class 的方式，附上我的 codepen
https://codepen.io/sun31483/pen/MdvGYK
                            
使用style.display的值來做判斷,是否要顯示
<div id="listBtn" onclick="listBtn()">秀出來</div>
<div id="textlistn" style=";">
	Hello IT邦
<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>
線上測試連結
                            
codepen
const listBtn = document.getElementById('listBtn');
const textlistn = document.getElementById('textlistn');
listBtn.addEventListener('click', (e) => {
  textlistn.style.display =
    textlistn.style.display === 'none'
      : 'none';