Preventing onclick() inheritance

I am building my own drop-down directory tree, and using a JavaScript onclick() event to show and hide child elements. The construction is basically an Unordered List.


<ul>

  <li><a href='#' onclick="toggle_visibility('level2');"> Parent 1 </li>

     <ul id='level2 style="display: none;">

          <li>Child 1</li>

          <li>Child 2</li>

     </ul>

  </li>

</ul>

Using in-line CSS to hide the child elements by default.
Using this JavaScript code:


<script type="text/javascript">

<!--

    function toggle_visibility(id) {

       var e = document.getElementById(id);

       if(e.style.display == 'none')

          e.style.display = 'block';

         

       else

          e.style.display = 'none';

    }


//-->

</script>

When I click on the parent element, the child elements show up properly as they should. But when I click on a child element, the entire tree collapses again (I think it's using some kind of inheritance). How can I prevent this from happening?

I've already tried giving the child elements a unique ID, but that doesn't seem to work.

This might not be important, but it's still worth mentioning that each child element is a hyperlink that submits a form using javascript in my actual code.

edit: never mind, I fixed it. Apparently the page gets reloaded whenever a form is submitted. To fix it, you must use IF statements to check if the form already has been submitted (passing information through hidden form elements, and then set the style of the child elements to "display: block" whenever the contents of the form have been submitted. In my case I've been using this with PHP variables :)