創建一個按鈕，顯示或隱藏一個div取決於它當前是否顯示

我是相當新的JS和想知道，如果有一個更清潔的方式來編寫此代碼？創建一個按鈕，顯示或隱藏一個div取決於它當前是否顯示

我試圖創建一個按鈕，顯示或隱藏div取決於它是否顯示當前。

提前非常感謝

安妮

var button = document.getElementById('button'); 
var hideText = document.getElementById('output').className = 'hide'; 

button.addEventListener('click',()=>{ 
    if(hideText){ 
     document.getElementById('output').className = 'unhide'; 
     hideText = false; 
    }else{ 
     document.getElementById('output').className = 'hide'; 
     hideText = true; 
    } 
})

CSS

.hide{display: none;} 

.unhide{display: block;}

來源

2017-10-15 Anne

只需使用一個類（例如unhide），並使其默認爲隱藏狀態。然後做

button.addEventListener('click',() => { 
    document.getElementById('output').classList.toggle('unhide'); 
}

來源

2017-10-15 14:51:55

非常感謝大家，我非常感謝所有的建議。 – Anne

不客氣！項目祝你好運。 –

您可以只需撥動類

button.addEventListener('click',() => { 
    document.getElementById('output').classList.toggle('hide'); 
}

來源

2017-10-15 14:48:27 Nick

*'unhide' * class似乎沒用！？ –

@ F.Hauri是的，我認爲你是對的。（根據您的建議刪除它） – Nick

您可以刪除多餘的變量hideText而且如果實現這樣的

var x = document.getElementById("output"); 
if (x.style.display === "none") { 
    x.style.display = "block"; 
} else { 
    x.style.display = "none"; 
}

jQuery中的像toggle，hide，show等簡單可行的方法額外的CSS。

來源

2017-10-15 14:51:13 pritesh

創建一個按鈕，顯示或隱藏一個div取決於它當前是否顯示

回答

相關問題