説明

1. 判斷節點（Node）裡面有沒有含有檢索的內容。
2. 若有，回傳true
3. 若無，回傳false

範例

#p.hi 123

console.log(p.classList.contains("hi"));
//true

進階：防止選取子元素

母選單設定點選→觸發子選單展開・收合的function，但因為子選單包在母選單底下，所以在子選單打開的狀況下，點選子選單內容，會觸發function，造成子選單收合

解決方法：在function裡面增加contains條件（選取子選單的class），防止子選單觸發

.nav
 ul
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.first
 |list 01 click
 ul.second
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02
 li.not-choose list 02

.second
 max-height: 0px
 overflow: hidden
 transition-duration: 0.5s
 
.open
 max-height: 100px

// if(e.target.classList.contains("list02")==true) return;
// // 讓他不要選到children
const firsts=document.querySelectorAll(".first");

firsts.forEach(first => first.addEventListener("click", function(e){
 //讓他不要選到children
 if(e.target.classList.contains("not-choose")==true) return;
 this.children[0].classList.toggle("open")
 
 
}))

Display