Realization of accordion Menu _jquery based on jquery code

First to show you the effect of the picture:

First look at the page code, nested list:

<div id= "Menudiv" > <ul id= "menu" > <li class= "Parentli" > <span>B</span> &L T;ul class= "Childrenul" > <li class= "Childrenli" ><span>C</span></li> <li clas s= "Childrenli" ><span>C</span></li> <li class= "Childrenli" ><span>c</span>&  lt;/li> </ul> </li> <li class= "Parentli" > <span>B</span> <ul class= "Childrenul" > <li class= "Childrenli" ><span>C</span></li> <li class= "C" Hildrenli "><span>C</span></li> <li class=" Childrenli "><span>c</span></ li> </ul> </li> <li class= "Parentli" > <span>B</span> <ul CLA ss= "Childrenul" > <li class= "Childrenli" ><span>C</span></li> <li class= "Child Renli "><span>c</span></li> <li class= "Childrenli" ><span>C</span></li> </ul> </ Li> </ul> </div>

CSS code, mainly set the background color and submenu to the left side of the style, set the suspension and selected style, start to set the submenu does not display (through JS set click after the display):

#menuDiv {
  width:200px;
  Background-color: #029FD4;
Parentli
{
  width:100%;
  line-height:40px;
  margin-top:1px;
  Background: #1C73BA;
  Color: #fff;
  Cursor:pointer;
  Font-weight:bolder
}
. Parentli span
{
  padding:10px
}
. Parentli:hover,. Selectedparentmenu
{
  background: #0033CC;
}
. Childrenul
{
  background-color: #ffffff;
  Display:none
}
. Childrenli
{
  width:100%;
  line-height:30px;
  Font-size:. 9em;
  margin-top:1px;
  Background: #63B8FF;
  Color: #000000;
  padding-left:15px;
  Cursor:pointer
}
. Childrenli:hover, Selectedchildrenmenu
{
  border-left:5px #0033CC solid;
  Background: #0099CC;
  padding-left:15px;
}

The next step is to click the event code:

$ (". Parentli"). Click (Function (event) {
    $ (this). Children ('. Childrenul '). Slidetoggle ();
  });
  $ (". Childrenli"). Click (Function (event) {
    event.stoppropagation ();
    $ (". Childrenli"). Removeclass (' Selectedchildrenmenu ');
    $ (". Parentli"). Removeclass (' Selectedparentmenu ');
    $ (this). Parents (". Parentli"). AddClass (' Selectedparentmenu ');
    $ (this). addclass (' Selectedchildrenmenu ');
  });

It should be noted that the list nesting, will cause event bubbling, so in the click of the submenu event to organize Bubbles, event.stoppropagation ();

The above code is very simple, the code is a comment, the jquery accordion menu is implemented. Need a friend to quickly refer to the next bar.