제이쿼리 요소 바깥쪽 클릭시 창닫기 length 판단

저렇게 모달창이 토글버튼으로 뜨면

다시 토글을 눌러줘야만 창이 꺼지기 때문에

다른곳을 클릭해도 꺼지지 않는다. 

 

---

이런식으로 다른 요소와 겹쳐나옴

이럴때 제이쿼리를 이용하여 꺼주기 

---

lanth 로 판단해 꺼주기 

 

document 즉 window의 하위객체인 html 문서 전체를 클릭해줄때 끄게 해준다.

e.target 을 찍으면 객체의 요소가 나온다.

 

lang_wrap 이 있는지 없는지 판단해보자.

consol 로 확인해보면 

 

 

 

맞으면 true 1 

아니면 false 0

 

---

방법1 요소의 부모를 판단해 꺼주기

  $(document).on('click', function (e) {
    console.log($(e.target).parent('.lang_wrap'));
    
    if (!$(e.target).parent('.lang_wrap').length) {
      $('#header .lang').hide();
    }
  });

타겟의 부모가 요소가 아니면? 

그 요소를 꺼라

 

---

방법2 요소가 타겟을 가지고 있는지 없는지 판단해 꺼주기

  $(document).on('click', function (e) {
    console.log($('#header .lang_wrap').has(e.target));
    
    if (!$('#header .lang_wrap').has(e.target).length) {
      $('#header .lang').hide();
    }
  });

has 클래스로 그 요소가 true 인 요소를 가지고 있지 않으면 그 요소를 꺼라

 

 

 

성공!