Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2009, 12:43
SAY
 
Сообщений: n/a

Компактное дерево
Добрый день!

есть скрипт древовидного меню:
<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>


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

Последний раз редактировалось Андрей Параничев, 17.04.2009 в 15:18. Причина: Пользуйтесь bb-тегами [js] и [html] для оформления листингов кода в теле сообщения
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2009, 20:49
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

в show находишь все span'ы с классом sub и скрываешь все, кроме того, который показываешь
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2009, 09:07
SAY
 
Сообщений: n/a

Сообщение от x-yuri Посмотреть сообщение
в show находишь все span'ы с классом sub и скрываешь все, кроме того, который показываешь
А можно поподробнее, нашел в инете функцию getElementsByClassName, но она работает только в ff3 и safari3, а хотелось бы, что бы скрипт работал во всех браузерах.
Ответить с цитированием
  #4 (permalink)  
Старый 20.04.2009, 18:12
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

видимо, пользоваться поиском по форуму не учили:
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 
}
Ответить с цитированием
  #5 (permalink)  
Старый 24.04.2009, 10:33
SAY
 
Сообщений: n/a

чего то я не догоню никак, как теперь скрыть то
пытался сделать
document.getElementByClassname("sub").style.display = 'none';

но ничего не получается
Ответить с цитированием
  #6 (permalink)  
Старый 24.04.2009, 10:55
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

getElementByClassname возвращают коллекцию объектов, а не один объект.
а getElementsByClass возвращает массив.но не один объект
обращайтесь к конкретному элементу по индексу.
либо перебирайте в цикле все элементы
Ответить с цитированием
  #7 (permalink)  
Старый 24.04.2009, 11:28
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

ай опередил меня
Ответить с цитированием
  #8 (permalink)  
Старый 24.04.2009, 12:28
ЫФН
 
Сообщений: n/a

Спасибо всем за помощь!
Сделал сам только по другому:
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';
}
Ответить с цитированием
  #9 (permalink)  
Старый 24.04.2009, 14:02
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

если честно - не красиво...
Ответить с цитированием
  #10 (permalink)  
Старый 24.04.2009, 14:06
SAY
 
Сообщений: n/a

Сообщение от AzriMan Посмотреть сообщение
если честно - не красиво...
Да я и сам уже понял, что кривовато, переделал:
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';
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск