Компактное дерево

[x-yuri]

я бы сделал как-то так:

<style>
 
p { margin: 0px }
body { font-size: 11px; font-family: verdana; line-height: 17px }
.sub { padding-left: 20px; display: block }
.menu { cursor: pointer; display: block }
a { text-decoration: none; color: #000000 }
 
</style>
 
<script language=JavaScript>
 
function show( node ) {
 
	if( arguments.callee.prv )
		arguments.callee.prv.style.display = 'none';
 	do {
		node = node.nextSibling;
	} while (! node.tagName);
	arguments.callee.prv = node;
	node.style.display = 'block';
}
 
</script>
 
<span class="menu" onclick="show(this)">+ Статьи</span>
 
<span class="sub" id="sub1" style="display: none">
<p><a href='http://'>Интернет</a></p>
<p><a href='http://'>JavaScript</a></p>
</span>
 
<span class="menu" onclick="show(this)">+ Рейтинг</span>
 
<span class="sub" id="sub2" style="display: none">
<p><a href='http://'>Главная</a></p>
<p><a href='http://'>Регистрация</a></p>
<p><a href='http://'>Статистика</a></p>
</span>
 
<span class="menu" onclick="show(this)">+ Форум</span>
 
<span class="sub" id="sub3" style="display: none; border: 3px">
<p><a href='http://www.webobzor.net'>Регистрация</a></p>
<p><a href='http://www.webobzor.net'>Cообщения</a></p>
<p><a href='http://www.webobzor.net'>Поиск</a></p>
</span>

1) нету глобальной переменной, 2) не нужно задавать id для всех подменю и привязывать обработчики к своим подменю - функция show сама все находит

Вот блин! Потребовалось сделать компактное дерево с неограниченным количеством уровней

<style>                                                                               
p { margin: 0px }                                                                     
body { font-size: 11px; font-family: verdana; line-height: 17px }                     
.sub { padding-left: 20px; display: block }                                           
.menu { cursor: pointer; display: block }                                             
a { text-decoration: none; color: #000000 }                                           
</style>                                                                              

<script language=JavaScript>
function show(obj) {  
if (document.getElementById(obj).style.display == 'none') 
{                                                         
    if (typeof old != "undefined")
    {                                                          
          document.getElementById(old).style.display = 'none'; 
    }                                                          
    document.getElementById(obj).style.display = 'block';      
    old=obj;                                                   
    return (old);                                     
}                                                              
else document.getElementById(obj).style.display = 'none';      
}                                                              

</script>

<span class="menu" onclick="show('sub1')">+ Статьи</span>

<span class="sub" id="sub1" style="display: none">
<p><a href='http://'>Интернет</a></p>             
<p><a href='http://'>JavaScript</a></p>           
</span>                                           

<span class="menu" onclick="show('sub2')">+ Рейтинг</span>

<span class="sub" id="sub2" style="display: none">
<p><a href='http://'>Главная</a></p>              
<p><a href='http://'>Регистрация</a></p>          
<p><a href='http://'>Статистика</a></p>           
</span>                                           

<span class="menu" onclick="show('sub3')">+ Форум</span>

<span class="sub" id="sub3" style="display: none; border: 3px">
<a href='http://'>Регистрация</a></p>                          
<span class="menu" onclick="show('sub4')">+ Cообщения</span>
              <span class="sub" id="sub4" style="display: none">          
              <p><a href='http://'>Главная</a></p>                        
              <p><a href='http://'>Регистрация</a></p>                    
              <p><a href='http://'>Статистика</a></p>                     
              </span>
<p><a href='http://'>Поиск</a></p>                              
</span>

И чего то я застрял, возникла идея вызывать функцию show, в которой будет указан еще и уровень вложения, например:

... onclick="show('sub4','2')" ....

а как это применить не соображу

[x-yuri]

зачем тебе уровень передавать? Оно и так должно работать. Просто есть разные варианты реализации... чем тебя твой не устраивает? Ну или вообще, как ты представляешь работу многоуровневого меню?

Ну или вообще, как ты представляешь работу многоуровневого меню?

Примерно так:

<style>                                                                                                                                                      
p { margin: 0px }                                                                                                                                            
body { font-size: 11px; font-family: verdana; line-height: 17px }                                                                                            
.sub { padding-left: 20px; display: block }                                                                                                                  
.menu { cursor: pointer; display: block }                                                                                                                    
a { text-decoration: none; color: #000000 }                                                                                                                  
</style>                                                                                                                                                     

<script language=JavaScript>
old = new Array(10);        
function show(obj,level) {  
if (document.getElementById(obj).style.display == 'none') 
{                                                         
    if ((typeof last != "undefined")&&(lastlevel != "undefined"))
    {                                                            
       if (level<lastlevel)                                      
       {                                                         
          for (var n=level; n<=lastlevel; n++) {                 
               document.getElementById(old[n]).style.display = 'none';
          }                                                      
       }
       if (lastlevel==level)
       {
          document.getElementById(last).style.display = 'none';
       }
    }
    document.getElementById(obj).style.display = 'block';
    last=obj;
    old[level]=obj;
    lastlevel=level;
    return (last,lastlevel,old);
}
else document.getElementById(obj).style.display = 'none';
}

</script>

<span class="menu" onclick="show('sub1','1')">+ 1</span>

<span class="sub" id="sub1" style="display: none">
<p><a href='http://'>1.1</a></p>
<p><a href='http://'>1.2</a></p>
</span>

<span class="menu" onclick="show('sub2','1')">+ 2</span>

<span class="sub" id="sub2" style="display: none">
<p><a href='http://'>2.1</a></p>
<p><a href='http://'>2.2</a></p>
<p><a href='http://'>2.3</a></p>
</span>

<span class="menu" onclick="show('sub3','1')">+ 3</span>

<span class="sub" id="sub3" style="display: none; border: 3px">
<a href='http://'>3.1</a></p>
<span class="menu" onclick="show('sub4','2')">+ 3.2</span>
    <span class="sub" id="sub4" style="display: none">
    <p><a href='http://'>3.2.1</a></p>
    <span class="menu" onclick="show('sub6','3')">+ 3.2.2</span>
        <span class="sub" id="sub6" style="display: none">
        <p><a href='http://'>3.2.2.1</a></p>
        <p><a href='http://'>3.2.2.2</a></p>
        <p><a href='http://'>3.2.2.3</a></p>
        </span>
    <p><a href='http://'>3.2.3</a></p>
    <p><a href='http://'>3.2.4</a></p>
    </span>
<span class="menu" onclick="show('sub5','2')">+ 3.3</span>
    <span class="sub" id="sub5" style="display: none">
    <p><a href='http://'>3.3.1</a></p>
    <p><a href='http://'>3.3.2</a></p>
    <p><a href='http://'>3.3.3</a></p>
    </span>
<p><a href='http://'>3.4</a></p>
</span>

Сделал, только остался вопрос. Почему не желательно использовать глобальные переменные?

[x-yuri]

потому что это может приводить к неожиданным багам, которые может быть нелегко найти. Потому что разные части кода могут непреднаеренно использовать одну и ту же переменную, и если это происходит одновременно...
Крайний случай: ключевое слово var всячески игнорируется - т.е. все переменные глобальные
p.s. и чем больше скриптов на странице (учитывая внешние библиотеки, если такие есть) - тем это актуальнее

потому что это может приводить к неожиданным багам, которые может быть нелегко найти. Потому что разные части кода могут непреднаеренно использовать одну и ту же переменную, и если это происходит одновременно...
Крайний случай: ключевое слово var всячески игнорируется - т.е. все переменные глобальные
p.s. и чем больше скриптов на странице (учитывая внешние библиотеки, если такие есть) - тем это актуальнее

Значит если я захочу избавиться от проблем, мне нужно будет или:
1) имена переменных придумывать позакавырестее
2) или cкрывать все элемены меню, с помощью функции getElementByClass, искать все родительские ветки и делать им style.display = 'block' ?

[AzriMan]

проблемы возникнут в том, что у вас переменная может называться content и в каком-то скрипте может существовать такая-же переменная. и результаты того, что участки кода, использующие эти переменные, могут выполняться одновременно - вы можете представить сами.
пойдем от обратного.

Почему не желательно использовать глобальные переменные

Крайний случай: ключевое слово var всячески игнорируется - т.е. все переменные глобальные

таким образом, если не игнорировать ключевое слово var, то переменные будут локальными.
пример.

a=5;
for (i=0;i<5;i++)
{alert (a);}

пять раз выведется 5

a=5;
for (i=0;i<5;i++)
{var a=4; alert (a);}
alert(a);

пять раз выведется 4, а потом выведется 5.

понятно?

С глобальными переменными все ясно!

Спасибо всем за помощь!

[x-yuri]

AzriMan, неудачный пример, 6 раз выведется 4. Лучше что-то типа

function a() {
    for( i=0; i<2; i++ )
        b();
}
function b() {
    for( i=0; i<2; i++ )
       alert('b');
}
a();

[AzriMan]

x-yuri, хм, да, действительно. а почему?