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); ?

Nate Barr · Accepted Answer · 2011-12-17 15:58:38Z

2

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.

answered Dec 17, 2011 at 15:58

Nate Barr

4,6602 gold badges28 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jatin Over a year ago

Thanks! One more thing: What is the need to use self["block" + direction]? The code works fine without that also.

Nate Barr Over a year ago

I'm not sure actually. I also could not see a difference in behavior. The purpose would be to prevent event queueing that could render an incorrect state, but it does seem redundant. Perhaps the author found it was necessary for older versions of jQuery or to solve a particular browser quirk.

Collectives™ on Stack Overflow

Navigation Menu using jQuery (from jQuery Cookbook)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related