[제이쿼리] 반응형 3depth 메뉴 슬라이드 토글 이벤트 만들기 (전파 방지하는 법)

요즘 반응형 페이지를 만들고 있는데, 자꾸 기초적인 부분에서 버벅거려서 또다시 공부&복습 겸 블로그에 정리하려 한다.

 

오늘은 3depth 메뉴에 이벤트 효과를 넣었는데 이벤트 전파 때문에 원하는 효과가 제대로 작동하지 않았음.

 

** 구현하고자 했던 효과는

PC일 때는 2depth까지만 보이고 클릭시 바로 링크로 이동.

PC

모바일에서는 클릭이벤트를 줘서(링크로 이동하지 않고) 3depth까지 하위 메뉴들이 슬라이드 토글되는 효과가 나타남.

최하위 메뉴인 3depth(그림에선 소메뉴)를 눌러야 링크 이동.

모바일

문제는 메뉴가 3depth까지 있음. 2depth 메뉴 버튼을 누르면 3depth가 안뜨고 1depth 메뉴 창이 슬라이드 업 됨..

그리고 PC에선 클릭시 a태그 작동해야하는데 모바일에서는 막아야함.. 2depth까진 간단했는데 3까지 가니까 뭔가 정리가 안됨;;

간단한 거였는데...왜이렇게 헤맸지. 

 

자 이제 핑계는 접어두고, 중요한건 전파를 막는 것 + 이벤트 동작을 멈추게 하는 것이다.

 

 

먼저 html은 ul>li>a로 짬. 호버시 2depth 보여지도록 CSS에서 간단하게 작성. (3depth는 display:none)

이제 모바일부터 제이쿼리 작성.

 

1.  대메뉴 클릭시 링크 이동하지 않도록 막는다. + 2depth(중메뉴) 슬라이드 토글 이벤트 

 ** preventDefault : 모든 이벤트 발생을 차단한다.

$('대메뉴ul > li').click(function(e){
  if($(window).width() < 1200){    //태블릿-모바일 환경
    e.preventDefault(); 
    $(this).children('하위메뉴').slideToggle();
    $(this).siblings().children('하위메뉴').slideUp();
  }
})

 

2. 중메뉴 클릭시 링크 이동하지 않도록 막는다(preventDefault()) + 대메뉴의 클릭 이벤트로의 전파를 막는다(stopPropagation()) + 3depth(소메뉴) 슬라이드 토글 이벤트

** stopPropagation : 이벤트를 부모로 전파되는 걸 막는다
$('중메뉴 ul > li').click(function(e){
  if($(window).width() < 1200){     //태블릿-모바일 환경
    e.preventDefault();
    e.stopPropagation();
    $(this).children('.sub-menu_child').slideToggle();
    $(this).siblings('.sub-menu_down').children('.sub-menu_child').slideUp();
  }
})

3. 소메뉴(3depth) 클릭시 링크로 이동돼야 하는데 대메뉴&중메뉴로 이벤트 전파돼서 메뉴창 슬라이드 토글이 됨.

전파를 막아 버튼을 눌렀을때 링크 이동되는 것 외에 다른 이벤트가 발생하지 못하게 한다.

$('소메뉴 버튼').click(function(e){ 
  e.stopPropagation(); 
})