Simple jquery left navigation bar and page Selection

Here is to implement and select the left side of the navigation, this function needs to reference jquery

Left Navigation:

<Div class = "box"> <ul class = "menu"> <li class = "level1"> <a href = "# none"> shirt </a> <ul class = "level2"> <li> <a href = "# none"> short sleeve shirt </a> </li> <a href = "# none"> long sleeve shirt </a> </li> <a href = "# none"> short sleeve t-shirt </a> </li> <a href =" # none "> long-sleeved t-shirt </a> </li> </ul> </li> <li class =" level1 "> <a href =" # none "> sweater </a> <ul class = "level2"> <li> <a href = "# none"> cardigan </a> </li> <a href = "# none"> pullover sweater </a> </li> <a href = "# none"> sports sweater </a> </li> <li> <a href = "# none"> children's clothing sweater </a> </li> </ul> </li> <li class = "level1"> <a href = "# none"> pants </a> <ul class = "level2"> <li> <a href = "# none"> shorts </a> </li> <li> <a href = "# none"> casual pants </a> </li> <a href = "# none"> jeans </a> </li> <li> <a href = "# none"> Hot Pants </a> </li> </ul> </div>Navigation HTML

Js Code:

<Script type = "text/javascript"> // wait until the dom element is loaded. $ (document ). ready (function () {$ (". level1> "). click (function () {$ (this ). addClass ("current") // Add the "current" style to the current element. next (). show () // display the next element. parent (). siblings (). children (""). removeClass ("current") // The child element of the sibling element of the parent element <a> remove the "current" style. next (). hide (); // hide return false;}); </script>Navigation JS/* reset */body {margin: 0; padding: 0 0 12px 0; font-size: 12px; line-height: 22px; font-family: "\ 5b8b \ 4f53", "Arial Narrow"; background: # fff;} form, ul, li, p, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;} input, select {font-size: 12px; line-height: 16px;} img {border: 0;} ul, li {list-style-type: none;} a {color: # effec7f; text-decoration: none;} a: hover {color: # bd0a01; text-decoration: underline ;}. box {width: 150px; margin: 0 auto ;}. menu {overflow: hidden; border-color: # C4D5DF; border-style: solid; border-width: 0 1px 1px;}/* lv1 */. menu li. level1 a {display: block; height: 28px; line-height: 28px; background: # EBF3F8; font-weight: 700; color: #5893B7; text-indent: 14px; border-top: 1px solid # C4D5DF ;}. menu li. level1 a: hover {text-decoration: none ;}. menu li. level1. current {background: # B1D7EF;}/* lv2 */. menu li ul {overflow: hidden ;}. menu li ul. level2 {display: none ;}. menu li ul. level2 li a {display: block; height: 28px; line-height: 28px; background: # ffffff; font-weight: 400; color: # 000056b; text-indent: 18px; border-top: 0px solid # ffffff; overflow: hidden ;}. menu li ul. level2 li a: hover {color: # f60 ;}CSS <script type = "text/javascript"> $ (document ). ready (function () {$ (". level2 "). each (function () {$ this = $ (this); if ($ this [0]. href = String (window. location) {$ this. addClass ("hover") ;}}) ;}); </script>Select JS on the page