$('#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를 다음으로 슬라이드를 닫아라
'jQuery > jQuery 기본' 카테고리의 다른 글
lnb depth02 구조 제이쿼리 클래스 걸기 (0) | 2022.11.22 |
---|---|
display flex 풀릴때 제이쿼리로 적용 (0) | 2022.11.10 |
제이쿼리 UI 간단사용법 (데이터피커 Datepicker Widget) 달력만들기 (0) | 2022.11.03 |
제이쿼리 위에서 아래로 모달팝업 on / is / (0) | 2022.11.02 |
제이쿼리 (e) e.preventDefault(); (0) | 2022.11.02 |
댓글