點擊添加&關閉class classList.toggle()

jQuery版寫法

功能

點一下添加class,再點一下移除class。
適合用在選單收合設計上。

範例

button#switch click it
.hidden Hidden Mssage !!
.hidden
 color: #11c1a4
 opacity: 0
 transition-duration: 0.5s
 
.show
 opacity: 1
document.querySelector("#switch").addEventListener("click", function(){
 document.querySelector(".hidden").classList.toggle("show");
})

Display

Leave a Reply

Your email address will not be published. Required fields are marked *