Jquery toggle() is not working for grandchildren

I am trying to develop a webpart which shows pages in parent-child-grandchild relation. Iam trying expand and collapse the children to show the grand children, but my code is trying to collapse parent when i try to expand child node. Iam posting my jquery and css files please help me if i am doing something wrong.

[updated]

I have changed my code to something like this...But now the problem is when you expand the list the image is not changing to [-].

Thanks.

Jquery code:

<script>
function handleClick(ev) {
ev = ev || window.event;
if(ev.preventDefault) {
ev.preventDefault();
} else if('cancelBubble' in ev) {
ev.cancelBubble = true;
}
}
</script>

<DIV id="divNav">
 <DIV id="divNavHeader"></DIV>
 <UL>
  <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('parentHover');}, function() { $(this).removeClass('parentHover');});" onclick="javascript: $(this).children().toggle();" id="liCurrentParentChild"><span class="plus">Parent1[+]</span><span class="minus">Parent1[&#8211]</span>
   <ul id="childCurrentList">
    <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('childHover');}, function() { $(this).removeClass('childHover');});" id="liCurrentChild"><a href="Parent1.aspx">Parent1</a></LI>
    <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('childHover');}, function() { $(this).removeClass('childHover');});" onclick="javascript: $(this).children('ul').toggle(); debugger; handleClick(event);" id="liCurrentParentGrandChild"><span class="plus">Parent1child1[+]</span><span class="minus">Parent1child1[&#8211]</span>
     <ul id="GrandChildrenList">
      <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('grandchildHover');}, function() { $(this).removeClass('grandchildHover');});" id="liCurrentgrandChild ><a href="Parent1child1.aspx">Parent1child1</a></LI>
      <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('grandchildHover');}, function() { $(this).removeClass('grandchildHover');});" ><a href="Parent1grandchild1.aspx">Parent1grandchild1</a></LI>
     </ul>
    </LI>
   </ul>
  </LI>
  <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('parentHover');}, function() { $(this).removeClass('parentHover');});" ><a href="Parent2.aspx">Parent2</a></LI>

 </UL>
</DIV>

css:

<style>
#childList { display: none; }
#GrandChildrenList { display: none; }

 .parentHover, #hover-demo1 p:hover 
 { 
  background:  #CBCCC0;
 }

 .childHover, #hover-demo1 p:hover 
 { 
  background:  #CBCCC0;
 }

 .grandchildHover, #hover-demo1 p:hover 
 { 
  background:  #CBCCC0;
 }

 .parentchildHover, #hover-demo1 p:hover 
 { 
  background:  #FFFFFF;
 }

 .minus { display: none; }

 .plus { display: inline; }

 .plus{ 
  color: #001A49; 
  padding: 3px 0px 3px 0px; 
  margin: 0 0 5px 0; 
  }

 .minus { 
  color: #001A49; 
  padding: 3px 0px 0px 0px; 
  margin: 0 0 0px 0; 
  }



#divNavHeader
{
  margin: 2px 0px 0 0px;
  padding: 5px 0px 5px 10px;
  background:#001A49;
  color: #FFFFFF;
  font-weight:600;
  width:260px;
}
#divNav
{
  margin: 2px 10px 0 0px;
  padding:0 0 0 0px;
  border:solid 1px #33333;
}

#divNav ul
{
 margin: -1px 0 0px 0px;
 padding:0px 0 0px 0px;
 cursor:pointer;
}

#divNav li
{    
 margin: 0px 4px 0px 4px;
 padding:3px 0 3px 10px;
 list-style-type: none; 
 border-top:solid 1px #333333;
} 

#divNav li ul /*{display: none;} */
{
 margin-top:3px;

} 

#liCurrent 
{
 background: #CBCCC0;
 color:#FFFFFF;
}

#liParentChi开发者_如何学Pythonld
{
 background: #ffffff;
 color:#001A49;
}

#liGrandChild
{
 background: #ffffff;
 color:#001A49;
}


#liParentChild .minus
{
 background: #ffffff;
 color:#001A49;
}

#liGrandChild .minus
{
 background: #ffffff;
 color:#001A49;
}


#liCurrentParentChild
{
 background: #ffffff;
 color:#001A49;
}

#liCurrentParentGrandChild
{
 background: #ffffff;
 color:#001A49;
}


#liCurrentgrandChild
{
 background: #ffffff;
 color:#001A49;
}

#liCurrentParentChild .plus
{
 background: #ffffff;
 color:#001A49;
}

#liCurrentParentGrandChild .plus
{
 background: #ffffff;
 color:#001A49;
}


#liCurrentChild
{
 background:#CBCCC0;
 color:#FFFFFF; 
}

#liCurrentgrandChild
{
 background:#CBCCC0;
 color:#FFFFFF; 
} 
#liCurrentgrandChild .minus
{
 background:#CBCCC0;
 color:#FFFFFF; 
} 
#liCurrentChild .minus
{
 background:#CBCCC0;
 color:#FFFFFF; 
}

/*


#divNav ul li:hover ,
#divNav ul li a:hover {                           
 display:block;
 position:relative;
 margin:0;
 top:15px;              
 left:30px;       
 height:auto;      
 width:13.5em;
 color:black;                        
 background:#999999        
}

#divNav  ul.li:hover ,
#divNav  ul.li a:hover  {    
 left:auto;
 right:0;         
}

* html #divNav  ul.li a:hover {         
 right:-1px;
}

#divNav li ul {display: none;} 
#divNav  li:hover > ul {display: block;} 
*/
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Step 1: Break ALL of your Javascript out into separate files. You're using jQuery, so there should be no Javascript floating in your HTML.

Step 2: If you are using XHTML as your DOCTYPE, you need to us li, not LI, as uppercase tag names are illegal in the XML definition.

Step 3: As Pointy mentioned, an id MUST be unique. Here is a good reference as to how to work with ids and classes. To make this easier to extend, I would change those names to classes anyway, because they are generic names. I will be assuming that you will be changing them into classes from here on out.

ASSUMING ALL OF THE ABOVE:

Here's a quick snippet of code that should give you an idea as to how you should be approaching the situation.

$('#divNav').delegate('liCurrentParentChild', 'click',
    function (e)
    {
        var $this = $(this); //This line allows you to not have to re-find 'this'
                             //in case you need to use it later in the function.
        var $children = $this.children(); //Same thing as the last line, but with
                                          //the children of $this.

        //Check first child element to see if it has been shown before.
        if('block' == $children.css('display'))
        {
            $children.hide();
        }
        else
        {
            $children.show();
        }
    }
);