Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml dir="LTR" lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>Jquery member management fold menu</title> <script type="text/javascript" src="js_date/js/jquery.js"></script> <style> body{margin:0; padding:0; font-size:12px;} div, form, ul, dl, dt, dd, ol, li { margin: 0 auto; padding:0; border:0; list-style:none;} h1,h2,h3,h4,h5,h6 {font-weight:normal;display:inline;font-size:100%;} .menu{width:185px;border-bottom:1px solid #58BAF9; } .menu .item{ width:183px; border-left:1px solid #58BAF9; border-right:1px solid #58BAF9; background:url(img/201108/mytours_dt_bg.gif) repeat-x;} .menu .item h4{ padding-left:10px; height:26px; background:url(img/201108/arrow_blue_up.gif) no-repeat 162px center; line-height:26px; color:#111; font-weight:bold; cursor:pointer;} .menu .item h4.off{ background-image:url(img/201108/arrow_blue_down.gif);} .menu ul{ margin-top:10px;} .menu ul li{height:24px;} .menu ul li a{ display:block; padding:4px 0 3px 10px; line-height:12px;} </style> </pead> <body> <div class="menu"> <div class="item"> <p>Order Management</p> <ul> <li>Order query</li> <li>My e-tickets</li> <li>My contact information</li> <li>Order consultation</li> </ul> </div> <div class="item"> <p>Personal information management</p> <ul> <li>Basic information</li> <li>Upload Avatar</li> <li>Change password</li> </ul> </div> <div class="item"> <p>My points and coupons</p> <ul> <li>My points</li> <li>Credit rules</li> <li>My exchanged gifts</li> </ul> </div> <div class="item"> <p>My companion tour</p> <ul> <li>My companion games</li> <li>Companion tour I applied</li> <li>Companion Game I replied</li> </ul> </div> <div class="item"> <p class="off">My recommendations</p> <ul > <li>Sales Alliance summary</li> <li>Commission account information</li> <li>Recommended to friends</li> </ul> </div> <div class="item"> <p>Email notification</p> <ul> <li>Subscribe to or cancel E-reports</li> <li>View or change product notices</li> </ul> </div> </div> <script type="text/javascript">JQuery (". item h4 "). click (function () {if (jQuery (". item ul: eq ("+ jQuery (". item h4 "). index (this) + ")" detail .css ("display") = "none") {jQuery (this ). removeClass ("off"); jQuery (". item ul: eq ("+ jQuery (". item h4 "). index (this) + ")"). slideDown ();} else {jQuery (this ). addClass ("off"); jQuery (". item ul: eq ("+ jQuery (". item h4 "). index (this) + ")"). slideUp ();}});</script> </body> </ptml></td> </tr></table>
Tip: you can modify some code before running
