Multi-level tree with markers (HTML, CSS). Continued with jQuery

In continuation of the topic about the tree, I remade the code a bit and connected jQuery. Now the tree is alive, the nodes unfold, as many expect it to see such a tree.
Now the tree's decoration is made by a script — it places markers for elements with nested nodes.
Using the HTML script has become easier.

UPD 04/05/2009: updated scripts, there are several variants of scripts.
UPD 04/09/2009: continued

Start HTML

Tree write in this form:

< div id ="multi-derevo" >
< h4 >< a href ="#" > </ a ></ h4 >
< ul ><! -- 1 -- >
< li >< span >< a href ="#1" > 1. </ a ></ span >
< ul ><! -- 2 -- >
< li >< span >< a href ="#11" > 1.1. </ a ></ span >
< ul ><! -- 3 -- >
< li >< span >< a href ="#111" > 1.1.1. </ a ></ span ></ li >
< li >< span >< a href ="#112" > 1.1.2. </ a ></ span ></ li >
</ ul >
</ li >
</ ul >
</ li >
<!-- 1 -->
< li >< span >< a href ="#2" > 2. </ a ></ span ></ li >
< li >< span >< a href ="#3" > 3. </ a ></ span ></ li >
< li >< span >< a href ="#4" > 4. </ a ></ span ></ li >
< li >< span >< a href ="#5" title =" " > 5. , </ a ></ span >
< ul ><! -- 2 -- >
< li >< span >< a href ="#1" > 5.1. </ a ></ span ></ li >
< li >< span >< a href ="#1" > 5.2. </ a ></ span >
< ul ><! -- 3 -- >
< li >< span >< a href ="#1111" > 5.2.1.1 </ a ></ span ></ li >
< li >< span >< a href ="#1112" > 5.2.1.2 </ a ></ span ></ li >
</ ul >
</ li >
</ ul >
</ li >
</ ul >
</ div ><! -- / multi-derevo -- >

Even if CSS is disabled, the tree will look as expected, i.e. as nested lists.
')
Compared to the previous version, CSS has changed a little. The previous version is completely here .

CSS

/* */
body {font-family: Arial, Tahoma, sans-serif; margin: 2em; font-size: 62.5%;}
p {
font-size: 1.2em;
}
a {
color: #0066cc;
text-decoration: none;
outline: none;
}
/*a:link {
color: #0066cc;
}
a:visited {color: #00cc63; }*/
a:hover {
text-decoration: underline;
}
a:active, a:focus {
color: #666;
background-color: #f4f4f4;
}
a.current {
color: black;
font-weight: bold;
background-color: #f4f4f4;
}

/*
-------------------------------- */
#multi-derevo {
width: 220px; /* */
border: solid; /* */
border-color: silver gray gray silver;
border-width: 2px;
padding: 0 0 1em 0; /* */
font-size: 1.3em;
}
span { /* */
text-decoration: none;
display: block; /* */
margin: 0 0 0 1.2em;
background-color: transparent;
border: solid silver; /* */
border-width: 0 0 1px 1px; /* : */
}
span a { /* */
display: block;
position: relative;
top: .95em; /* */
background-color: #fff; /* */
margin: 0 0 .2em .7em; /* , */
padding: 0 0.3em; /* */
}
h4 { /* */
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 0 .25em;
border-bottom: 1px solid silver;
}
h4 a {
display: block;
}
ul, li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
ul li {
line-height: 1.2em;
}
ul li ul {
display: none; /* */
}
ul li ul li {
margin: 0 0 0 1.2em;
border-left: 1px solid silver; /* */
}
li.last { /* , . */
border: none;
}
.marker { /* */
border-color: transparent transparent transparent gray;
border-style: solid;
border-width: .25em 0 .25em .5em;
margin: .35em .25em 0 0;
float : left;
width: 0px;
height: 0px;
line-height: 0px;
}
.marker.open { /* */
border-color: gray transparent transparent transparent;
border-width: .5em .25em 0 .25em;
}
/* IE 6 Fixup */
* html #multi-derevo * { height: 1%;}
* html .marker { border-style: dotted dotted dotted solid; }
* html .marker.open { border-style: solid dotted dotted dotted; }

Javascript

The script is written using jQuery. All explanations for the script, see the comments code.
A lot of comments - this is my first jQuery script, so I wrote in detail.

<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type= "text/javascript" ></script>
<script>
/*<![CDATA[*/
/*
HTML .

.
.
- (/).
- ,
, .
- (.current)
.
-
.
*/
$( document ).ready( function () {
/* , .
'li' 'ul',
, .. 'li' 'a'
'<em class="marker"></em>'.
a:first , 1
.
*/
$( '#multi-derevo li:has("ul")' ).find( 'a:first' ).prepend( '<em class="marker"></em>' );
//
$( '#multi-derevo li span' ).click( function () {
//
$( 'a.current' ).removeClass( 'current' );
var a = $( 'a:first' , this .parentNode);
//
// a.hasClass('current')?a.removeClass('current'):a.addClass('current');
a.toggleClass( 'current' );
var li=$( this .parentNode);
/* ,
*/
if (!li.next().length) {
/* <li>, <ul>,
ul > li, 'last' */
li.find( 'ul:first > li' ).addClass( 'last' );
}
//
var ul=$( 'ul:first' , this .parentNode); //
if (ul.length) { //
ul.slideToggle(300); //
// /
var em=$( 'em:first' , this .parentNode); // this = 'li span'
// em.hasClass('open')?em.removeClass('open'):em.addClass('open');
em.toggleClass( 'open' );
}
});
})
/*]]>*/
</script>

Greet all improvements and optimizations from jQuery experts.
Perhaps there is a fiery jQuery lover who will do it on pure JS - also interesting.

In pure JS (FF3.0, IE6) from ArtemS .
Another jQuery option from sway .

Example

See in action .

Tested in FF3, IE6-8, Opera 9, Google Chrome.

PS Leonard , thanks for your example script in the previous topic.

Updates
04/05/2009 Updated script (replacing hasClass, addClass, removeClass with toggleClass). Updated example. Added footnotes to alternative scripts for the tree.
04/09/2009: continued