jQuery에서 slideDown을 사용할 때
본문
화면에서 특정 리스트를 클릭하면
클릭한 곳만 슬라이드 다운
그런데 다른 곳을 클릭하면 원래 슬라이드 다운된 곳이 슬라이드 업 되게 하고 싶은데
클릭된 것 이외의 다른 리스트는 어떻게 지정해야할까요?
현재 소스는 이러한 형태입니다.
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
답변 3
this 대신 on()메소드에 있는 선택자를 넣어주시고,
slideDown() 대신 slideUp() 해주시면 되겠네요.
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
$(".Class").find('.dropdown-menu').first().stop(true, true).slideUp(300);
$("#ID").find('.dropdown-menu').first().stop(true, true).slideUp(300);
click 이벤트를 주셔서 if문으로 특정 리스트를 클릭했을 때
슬라이드 다운을 주고 else 로 클릭했을 때가 아니라면 슬라이드 업을 주시는게 간단할 것 같습니다.
슬라이드 되는 영역들을 변수로 잡으시고
가령 var $list = $('li');
특정 영역 클릭했을때, 저 변수들 모두를 $list.slideUp()과 같이 적용하시고, 그 뒤에 클릭한 특정영역의 슬라이드 다운을 진행시키시는게 가장 간단한 방법이 아닐까 싶습니다.
그리고 부트스트랩에서 collapse 를 이미 지원하니 그것을 가져다쓰시는 것도 방법입니다.