tree (дерево)

var t,lit,i;
    
function tree(liter) {         
    lit=liter;						//литера
    i=1;							//счетчик
    t = setInterval(show, 75); 	//развертываем/сворачиваем с заданным интервалом
}
      
function show() {
	var el;
    if(el = document.getElementById(lit + i)) {
		el.style.display = (el.style.display == 'block')?'none':'block';	
		i++;		
    }   
    else clearInterval(t);        
}

    
something1
    
something2
    
something3
    
something4sublist
        

            
something41
            
something42sublist
			

            	
something421
		    	
something422
        	
	    	
            
something43
        
    
    
something5

• если высота блока меньше высоты развернутого списка, то при раскрытии/закрытии пунктов размеры блока будут скакать, придется принимать дополнительные меры

• Tweet

Комментарии:

не вижу рекламы на этом сайте. сорри, фаерфокс все режет. но автору спасибо :-*

А вот еще рабочий пример дерева http://nulay.narod.ru/

автору ОГРОМНОЕ спасибо! Побольше бы таких ресурсов в РУнете!

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

to shark182: совсем не сложно - при нажатии на пункт сначала закрывайте все в цикле, а затем открывайте тот, на который нажали. Задача усложнится, если будет больше одного уровня вложенности - их нужно будет учитывать, чтобы не закрыть родительский пункт вместе с нажатым элементом

to Alek Veritov: Не ожидал настолько быстрой реакции. Нельзя ли подробнее? Меню например с одним уровнем вложенности. Думаю это дополнение пригодится и другим.

to Alek Veritov: У меня уже цифры с ника выпадать стали от мозгового штурма. I need help! Как сначала закрыть все ветки и открыть нужную? P.S. А я вам на баннер кликну))

Заработало, но конструкция довольно громоздкая получилась. Через id и каждому элементу прописывается нечто вроде: document.getElementById('s1').style.display='none'; и т.д.

Разрешите вопрос. Каким образом организован цикл по переменной i. можно объяснить?

Разрешите вопрос. Каким образом организован цикл по переменной i. можно объяснить?

так проще и понятнее:

function tree(lit)
{
var el;
var i = 1;
while (el = document.getElementById(lit + i))
{
if (el.style.display == 'block') el.style.display = 'none';
else el.style.display = 'block';

i++;
}
}

забыл: и работает даже в IE )))

Подскажите пожалуйста как можно запомнить позицию на которой открыто дерево. Чтоб оно не сворачивалось после обновления страницы

Запомнить позицию можно в куках или в сессии, а при обновлении восстанавливать. Про то, как это сделать на чистом javascript'е можно почитать здесь - http://xhtml.ru/2008/05/14/sessvars/
А вообще планирую скоро выложить материал по этой теме.

А подскажите пожалуйста для того что бы запомнить позицию достаточно запомнить значение переменной i в функции show()?

Здравствуйте!
Спасибо автору за дерево, всё работает очень неплохо, но есть одна проблемка - http://tdshans.ru/katalog.html, когда наводишь курсор на дерево, то вместо руки появляется значёк "I", а у Вас нет, почему? Помогите пожалуста разобраться.

Спасибо Автору, не респект Автору за простоту =))) все просто до ужаса =))) а самое главное я нашел в этом то что искал !!!

"Rus" я не глядел к автору кода в код, но могу сказать что подобное сделать можно с помощью css пример "cursor:pointer;"
Прошу прощения у Админа за ссылку htmlbook.ru вам поможет

от кого: