Navigation Menu using jQuery (from jQuery Cookbook)

Question

The menu is supposed to show sub-items upon hover. Here's the code (from http://docs.jquery.com/Cookbook/Navigation):

   <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 code:

$(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();
});

What is this in the toggle function above? How is the code working? What is being selected by $("ul", this); ?

Answer 1

The "this" refers to the jQuery object $("li.menu") - when the hover method call applies the toggle function to that object. $("ul", this) selects ul elements that are children of the context provided in the second argument ("this"), thus it selects the ul elements nested within the li.menu elements. Hopefully that makes the hover/toggle functions make sense.