jquery 자신 제외한 부분을 클릭했을 때 사라지게 하기.(e.target)

➜모바일 네비를 만들 때, 네비 밖을 클릭하면 네비가 사라지게 하기

 

 

// 네비 이외 클릭하면(클릭한 곳이 .nav가 아니면) 네비 OFF

 

$('.outside-of-nav').on('click', function(e){
  if($('.nav').has(e.target).length === 0 ){ 
    //네비가 사라지는 함수 입력
  }
  //console.log($('.nav').has(e.target).length); //1 || 0
  //console.log(e.target); //'.inside-of-nav' || '.outside-of-nav'
});

'html' 안을 클릭했을 때, '.nav'안에 그 클릭된 요소(e.target)의 길이가 0이면(=없으면) 함수를 실행해라.

 

여기서 (e.target)은 이벤트를 촉발시킨 엘리먼트(=여기서는 네비안의 메뉴)를 불러온다.

따라서, 'html'내 어딘가를 클릭했을 때, (e.target)이 '.nav' 또는 '.nav'의 자식이면 함수가 실행되지 않고,

(e.target)이 '.nav'또는 '.nav'의 자식이 아니면 함수가 살행된다.

 

※ 콘솔로 확인해보기

클릭한 곳이 '.nav'의 자식 '.nav_menu'이라고 가정하면,

console.log($('.nav').has(e.target).length); 값은 1, console.log(e.target);의 값은 '.inside-of-nav'가 나온다.

클릭한 곳에 '.nav' 이하의 요소들이 포함되어있지 않다면,

console.log($('.nav').has(e.target).length); 값은 0, console.log(e.target);의 값은 '.ouside-of-nav'이 나온다.

 

 

위 코드를 활용하여 만든 네비가 있어 추가한다.

클릭 대상을 메뉴가 나올때 어두워지는 .nav의 부모로 잡았는데 코드펜 임베드 화면이 작아서 짤리므롴ㅋㅋ 링크로 들어가서 모바일 크기로 보기ㅋㅋ

https://codepen.io/GIMME-the-world-/pen/GRPWeMx

See the Pen header-module1(responsive) by GIMME the world 김미더월드 (김미더월드) (@GIMME-the-world-) on CodePen.