본문 바로가기
jQuery/jQuery 기본

gnb메뉴 on click 이벤트 중복방지

by hyojinny 2022. 11. 10.

  $('#header .gnb>li>a').on('click', function () {
    $(this).parent().toggleClass('on').siblings().removeClass('on');

    // depth02가 안보이면 열기
    if (!$(this).next().is(':visible')) {
      $(this).next().slideDown(2000).parent().siblings().find('.depth02').slideUp();
    } else {
      $(this).next().slideUp(2000);
    }
  });


1 .gnb>li>a 에 온클릭 이벤트를 걸어서 
이벤트를 건 자신 (this)의 부모 (li)에 토글이벤트를 켜라.
그리고 형제들은 on 이벤트를 껴라 

2. 만약 (this : gnb>li>a)의 next 다음 is :visible (요소가 보이는지) ! 아니면 
:visible 보인다.
(안보일때 false 일때 )

보이지 않을때 
this 에 다음요소 (ul depth02) 슬라이드를 열고 (this : gnb>li>a) 부모의 형제에서 depth02를 찾아서 
닫아라 

만약 보이면
this를 다음으로 슬라이드를 닫아라

댓글