Example of a tree cascade menu with a plus sign and a scalable extension in the jquery tree

Prepare two images for expansion and expansion

The code is as follows:

Copy code

Css code . Menu dl {padding: 5px 0; background: # e9e9e9 ;} . Menu dl dd {width: 124px; height: 30px; line-height: 30px; color: #0049a7; padding-left: 46px ;} . Menu dl dd a {color: #0049a7 ;} . Menu dl dd a: hover {color: #000 ;} Html code: <Div class = "leftsidebar fl"> <Div class = "menu"> <H3> <a href = "#"> <I> </I> vehicle management </a> <Dl style = "display: block"> <Dd> <a href = "#"> vehicle list </a> </dd> <Dd> <a href = "#"> vehicle list </a> </dd> <Dd> <a href = "#"> vehicle list </a> </dd> </Dl> </Div> <Div class = "menu"> <H3> <a href = "#"> <I> </I> Vehicle Management 11 </a> <Dl style = "display: none"> <Dd> <a href = "#"> vehicle list </a> </dd> <Dd> <a href = "#"> vehicle list </a> </dd> </Dl> </Div> </Div>

Javascript code:

The code is as follows:

Copy code

$ (Function (){ /* Left menu */ $ (". Menu h3 a"). click (function (){ Background ("background", "). end (); $ (This). parent (). next (). show (). parent (). siblings (). children ("dl"). hide (); // Var I = $ (this). parent (). next (). children ("dd"). length Var dl = $ (this). parent (). next () If (dl.css ("display") = "none ") { $ (This). find ("img"). attr ("src", "images/icon_add.png"). end () . Parent (). parent (). siblings (). find ("img"). attr ("src", "images/icon_j.png "); } Else { $ (This). find ("img"). attr ("src", "images/icon_j.png"). end () . Parent (). parent (). siblings (). find ("img"). attr ("src", "images/icon_add.png "); } }); });