Display and collapse the navigation menu effects and the accordion navigation menu

Display and collapse the navigation menu effects and the accordion navigation menu

Display and fold the navigation menu effect in the accordion mode:
This topic describes a code example that enables you to expand and collapse the navigation menu in the accordion mode.
The code example is as follows:

<! DOCTYPE html> 
The above code implements our requirements. The following describes the implementation process.
I. Code comments:
(1). $ (document). ready (function () {}). When the document structure is fully loaded, run the code in the function.
(2 ). $ ("dd: not (: first )"). in hide (), all dd elements except the first dd element are hidden, that is, the sub-menu of the first navigation menu is expanded and hidden.
(3). $ ("dt a"). click (function () {}) to register the click event processing function for element a under the dt element.
(4). $ ("dd: visible"). slideUp ("slow"), all the displayed dd elements are reduced and hidden by animation.
(5 ). $ (this ). parent (). next (). slideDown ("slow"): the parent element of the currently connected Element a, that is, the dt element. The next element of the dt element is the dd element of the level-2 menu. The menu is animated.
(6). return false, which is very important to prevent link Jump Actions.
Ii. Related reading:
(1).: not refer to the not selector section of jQuery.
(2).: For more information, see the first selector section of jQuery.
(3).: see the visible selector section in jQuery.
(4). slideUp () can refer to jQuery's slideUp () method.
(5). For details about parent (), see section 1 of parent () method of jQuery.
(6). next () can refer to jQuery's next () method.
(7). For details about return false, see what chapter does return false play in the link.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 18316.
For more information, see: http://www.softwhy.com/jquery/