【JavaScript】Contains Method

説明

  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

Leave a Reply

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