Use jquery to create an accordion effect .)

Http://www.cssrain.cn/article.asp? Id = 1369

Create an accordion using jquery

 

This example describes how to use jquery to create a simple vertical accordion menu, from easy to difficult.

 

Step 1: set up the basic structure.

 

 

 
I am using the DL DT dd structure, as shown below: <DL id = "sfqclick"> <DT class = "leftico"> MainLink-1 </DT> <DD> <a href = "#"> SubLink-1 </a> <a href = "#"> SubLink-2 </a> <a href = "#"> SubLink-3 </a> </DD> ...... </dl>
 

 

Demo: http://www.cssrain.cn/demo/sfq-menu/demo1.html

Step 2: add an onclick event

 

Code$ (Document ). ready (function () {// click to trigger $ ("# sfqclick DT "). click (function () {$ (this ). toggleclass ("bottomico "). next (). slidetoggle (300 ). siblings ("DD "). slideup ("slow"); $ (this ). siblings ("DT "). removeclass ("bottomico ");});});
 

Demo: http://www.cssrain.cn/demo/sfq-menu/demo2.html

Step 3: The current click is included in the cookie and refresh and maintain

 

By using cookies, you can remember the directory that the customer last clicked, and refresh the directory to keep it.

 
$ (Document ). ready (function () {// click to trigger $ ("# sfqclick DT "). click (function () {$ (this ). toggleclass ("bottomico "). next (). slidetoggle (300 ). siblings ("DD "). slideup ("slow"); $ (this ). siblings ("DT "). removeclass ("bottomico"); var Index = $ ("# sfqclick DT "). index (this); $. cookie (the _ cookie, index); // set cookie}); var cookievalue = $. cookie (the _ cookie); If (cookievalue) {$ ("# sfqclick DT "). eq (cookievalue ). click ();}});
 

 

Demo: http://www.cssrain.cn/demo/sfq-menu/demo3.html

Step 4: add an onmouseover event.

 

Directly change click to Mouseover? Of course it is not that simple. Check demo4.
Demo: http://www.cssrain.cn/demo/sfq-menu/demo4.html

 

Step 5: Add latency settings for the Mouseover event

 

By adding latency to Mouseover, the bug in demo4 is solved.
Demo: http://www.cssrain.cn/demo/sfq-menu/demo5.html

 

Step 6: Add onclick Based on onmouseover

 

The onclick event is also required, so you need to add onclick Based on onmouseover.
Demo: http://www.cssrain.cn/demo/sfq-menu/demo6.html

 

Step 7: Final Results

 

Thanks for seeing this.
Demo: http://www.cssrain.cn/demo/sfq-menu/demo7.html

example package download:
http://www.cssrain.cn/demo/sfq-menu/sfq-menu.rar