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

Добрый день!

есть скрипт древовидного меню:

<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')
document.getElementById(obj).style.display = 'block';
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">
<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>

Как сделать что бы при открытии ветки меню, остальные ранее открытые ветки закрывались?
Спасибо!

в show находишь все span'ы с классом sub и скрываешь все, кроме того, который показываешь

А можно поподробнее, нашел в инете функцию getElementsByClassName, но она работает только в ff3 и safari3, а хотелось бы, что бы скрипт работал во всех браузерах.

видимо, пользоваться поиском по форуму не учили:

function getElementsByClass(searchClass,node,tag) {
 	 //Dustin Diaz's getElementsByClass implementation
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		} //if
	} //for
	return classElements;
}

if(document.getElementsByClassName) {
	var anal_tables  = document.getElementsByClassName("sub");
	//Firefox 3  C++ native implementation
} else {
	var anal_tables  = getElementsByClass("sub", document, "span");
	//Dustin Diaz's getElementsByClass implementation 
}

чего то я не догоню никак, как теперь скрыть то :help:
пытался сделать

document.getElementByClassname("sub").style.display = 'none';

но ничего не получается

getElementByClassname возвращают коллекцию объектов, а не один объект.
а getElementsByClass возвращает массив.но не один объект
обращайтесь к конкретному элементу по индексу.
либо перебирайте в цикле все элементы

ай опередил меня :)

Спасибо всем за помощь!
Сделал сам :dance: только по другому:
function show(obj) {

if (document.getElementById(obj).style.display == 'none')
{
    if(typeof old == "undefined")
    {
       old="";
    }
    else
    {
       document.getElementById(old).style.display = 'none';
    }
    document.getElementById(obj).style.display = 'block';
    old=obj;
    return (old);
}
    else document.getElementById(obj).style.display = 'none';
}

если честно - не красиво...

Да я и сам уже понял, что кривовато, переделал:

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';
}