In the previous part of this two-part tutorial, I began describing how to build a bulleted menu of links, such as you might see on many web sites. These links unfold, so that some headings, when clicked, reveal links below them to pages that are subcategories. In this second part, I will jump right back into the subject, starting with the JavaScript code we need to accomplish the magic.
Completing a Bulleted Menu Of Links - Global Variables (Page 3 of 5 )
There are two global variables: SndLBullet and timesToIgnore. SndLBullet is initialized to false and timesToIgnore is initialized to zero. I will explain their purposes shortly.
Assume that a first level link bullet (LI element) is clicked. The global variables stay at their initial values. After forming the LI id, the expandOrCollapse() function first checks to see if timesToIgnore == 0. Since the initial value of timesToIgnore is zero, this condition is satisfied.
The function goes on to check if the length of the number part of LI id is 1. If it is 1, it means it was the first level LI element that was clicked. If it is 2, it means it was a second level LI element that was clicked. The IDs were given while bearing this in mind. Since we are talking about the case when the first level LI element is clicked, it means the condition (rightIDpart.length == 1) is satisfied.
The function goes on to check if “SndLBullet == false.” Since the initial value of SndLBullet is false, this condition is satisfied. The function then goes to an innermost block. Remember that the function had developed the UL ID for the corresponding (below) UL element of the LI element clicked. In this innermost block, the function first checks to see if the value of the display property of the corresponding UL element is “none.” If it is “none,” it displays the UL element (which has LI elements with links). If it is block, it removes it. So each time you click a First level LI element you either show its sub-lists or remove it. I will give you the details of this innermost block shortly.
Assume that a second level link bullet (LI element) is clicked. The global variables stay at their initial values for now. After forming the LI id, the expandOrCollapse() function first checks if timesToIgnore == 0. Since the initial value of timesToIgnore is zero, this condition is satisfied.
The function goes on to check if the length of the number part of LI id is 1 It is not 1; it is 2, because the second level link element has been clicked. The else-if condition (rightIDpart.length == 2) is cheeked and it is satisfied.
The function then goes into an innermost block. There, it first set the global variable SndLBullet to true, indicating that a second level LI element has been clicked. In this innermost block, the function first checks if the value of the display property of the corresponding (below) UL element is “none.” If it is “none,” it displays the UL element (which has LI elements with links). If it is “block,” it removes it. So each time you click a second level LI element you either show its sub-lists or remove it. I will give you the details of this innermost block shortly.
HTML 
/ 3 
More Top jQuery Plugins for Menus
