Tree (дерево)

В статье рассмотрено создание на основе JavaScript древовидной структуры с плавно раскрывающимися списками.

Начну с примера:

Это скелет для построения полнофункционального скрипта классического дерева или другого списка, хотя можно использовать и в таком виде. Рассмотрим код:

JavaScript:

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

HTML:
    • something1
    • something2
    • something3
    • something5

Можно убрать setInterval и просто вызывать функцию show(), тогда список будет открываться не поочередно, а сразу.

проблемы:

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

 

Оцените статью
Добавить комментарий

  1. mrded

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

  2. vnilov

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

  3. shark182

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

  4. Alek Veritov

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

  5. shark182

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

  6. shark18

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

  7. shark182

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

  8. $ezh

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

  9. $ezh

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

  10. ganjour

    так проще и понятнее: 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++; } }

  11. ganjour

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

  12. vadim

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

  13. Alek Veritov

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

  14. vadim

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

  15. Rus

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

  16. Ksanti

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

  17. Ksanti

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

  18. Robocar

    Ты крут, создатель сайта. Подписываюсь 👆