Multi-level tree with markers (HTML, CSS, jQuery). Remember the selected node

This is a continuation of the topic about the tree . I want to bring it to the rank of “ready for implementation”. Therefore, I fiddled with JavaScript and made memorization of the selected node based on the address of the link.
If the link is nested in a subtree, the tree will expand to its level and, if it itself has a subtree, it will also be expanded.

JavaScript did as best it could, because I have not used it for a long time. I ask for help in the refinement and optimization.


In this version, HTML and CSS did not change, if you want - see it in the previous article .
')
The next article continued is a tree with state preservation of nodes .

Javascript

<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' );
toggleNode( this .parentNode);

});
postLoad();
})
//
function toggleNode(Node) { // node= li
prepareLast(Node);
//
var ul=$( 'ul:first' ,Node); //
if (ul.length) { //
ul.slideToggle(200); //
// /
var em=$( 'em:first' ,Node); // this = 'li span'
// em.hasClass('open')?em.removeClass('open'):em.addClass('open');
em.toggleClass( 'open' );
}
}
//
function prepareLast(Node) {
/* ,
*/
$(Node).each( function (){
if (!$( this ).next().length) {
/* <li>, <ul>,
ul > li, 'last' */
$( this ).find( 'ul:first > li' ).addClass( 'last' );
}
})
}
//
function postLoad(){
var url = window.location.toString();
var max = 0;
var a = null ;
$( '#multi-derevo li span a' ).each( function (){
//
if (url.indexOf( this .href) >= 0 && this .href.length > max){
a = this ;
max = this .href.length;
}
});
// ,
if ($(a). is ( ':hidden' ) || $(a).parents( ':hidden' ).length) {
var li = $(a).parents().filter( 'li' );
prepareLast(li);
toggleNode(li);
}
//
if (a) {
$(a).toggleClass( 'current' );
}
else { // , ( )
$( '#multi-derevo li span a:first' ).toggleClass( 'current' );
}
}
/*]]>*/
</script>

For some reason, for the first level, it was not possible to make auto expansion of the subtree after loading if the node was selected earlier.
It needs to be improved, I will accept all the improvements with pleasure.

This example has the disadvantage that the state of all nodes is not remembered, but only the position of the selected one.
Those. Previously, the tree was deployed on 3 levels deep, then after clicking on a link from the very top, only the first sublayer will unfold.

See an example .

I also want to make a modification with cookies, which will remember all the expanded subtrees, i.e. If the user previously expanded the tree and then turned the top level, then about the deployment, the nested tree will also be expanded. And of course all the status thanks to cookies will be saved when switching between pages.

Tell HabrNarod that this topic fits into this block, or you can transfer everything to web development or jQuery - I doubt it.