jQuery를 사용한 탐색 메뉴 (jQuery 요리 책에서)

Question

메뉴는 마우스를 가져갈 때 하위 항목을 표시합니다.

<ul id="menu"> 
    <li class="menu">Sub 1 
    <ul> 
     <li>test 1</li> 
     <li>test 2</li> 
     <li>test 3</li> 
     <li>test 4</li> 
    </ul> 
    </li> 

    <li class="menu">Sub 2 
    <ul> 
     <li>test 1</li> 
     <li>test 2</li> 
     <li>test 3</li> 
     <li>test 4</li> 
    </ul> 
    </li> 
</ul> 

jQuery 코드 :

이

$(document).ready(function() { 
var toggle = function(direction, display) { 
return function() { 
    var self = this; 
    var ul = $("ul", this); 
    if(ul.css("display") == display && !self["block" + direction]) { 
    self["block" + direction] = true; 
    ul["slide" + direction]("slow", function() { 
     self["block" + direction] = false; 
    }); 
    } 
}; 
} 

$("li.menu").hover(toggle("Down", "none"), toggle("Up", "block")); 
    $("li.menu ul").hide(); 
}); 

위의 토글 기능에 this 무엇입니까 여기에 (http://docs.jquery.com/Cookbook/Navigation에서)이 코드는? 코드는 어떻게 작동합니까? 무엇이 $("ul", this);에 의해 선정되고 있습니까?

Answer 1

"this"는 jQuery 객체 $("li.menu")을 가리 킵니다. 호버 메소드 호출이 해당 객체에 토글 기능을 적용 할 때입니다. $("ul", this)은 두 번째 인수 ("this")에 제공된 컨텍스트의 자식 인 ul 요소를 선택하므로 li.menu 요소 내에 중첩 된 ul 요소를 선택합니다. 호버 트/토글 기능을 이해하기를 바랍니다.