JQuery : children () 메소드 사용해보기

  <a href="#">MENU-1</a>
    <div class="sub-menu">
      <a href="#">SUM-MENU-1</a>
      <a href="#">SUM-MENU-2</a>
      <a href="#">SUM-MENU-3</a>
      <a href="#">SUM-MENU-4</a>
    </div>

$('.menu li').mouseenter(function(){
  $(this).children('.sub-menu').stop().slideDown()
})

$('.menu li').mouseleave(function(){
  $(this).children('.sub-menu').stop().slideUp()
})

흐름 요약

 

MENU - 1 에 올렸을때 ( mouseenter ) 해당 a태그를 보여주고 싶다.

보면 ul 의 클래스 .menu li 안에 자식요소는 2명인데 a 태그와 sub-menu 가 있다.

여기서 자식요소를 선택하는 메소드는 children인데 그앞에 this를 써주는 이유는

내가 MENU-1 MENU-2 를 하나씩 선택했을때만 보이고 싶지 MENU1을 선택했을때 MENU2까지 선택되게  하고싶지 않기에 지정을 해주는게 this이다. 그럼 내가 마우스를 올린곳만 작동하게 되고 

그 자식요소인 children ('.sub-menu') 이렇게 내가 원하는 자식을  선택해줌으로써 sildeDown()으로 해주는거다.

근데 앞에 stop은? 애니메이션이 계속 작동하면 약간 이상오류를 겪게 되는데  그걸 끊어주는 역할을 한다.

일단 이렇게 해석하고 이해하자