Простейшее дерево на javascript
tags: javascript
В статье рассмотрено создание древовидной структуры на "чистом" JavaScript с плавно раскрывающимися списками. Это скелет для построения полнофункционального скрипта, хотя можно использовать и в таком виде.
Сразу результат:- something1
- something2
- something3
- something4 sublist
- something41
- something42 sublist
- something421
- something422
- something423 sublist
- something4231
- something4232
- something4233
- something424
- something43
- something44
- something45
- something5
- something6
- something7
CSS (нужен, в основном, для сквозной нумерации в списках, для ненумерованных списков можно оставить только display: none; для вложенных): HTML: JavaScript:
Можно обойтись без тегов <a> в узлах дерева
(надо будет подправить querySelector), они добавлены для наглядности.
Быть добру!
posted on may 17, 2008,
updated on september 11, 2025
Комментарии
Отправка новых комментариев временно отключена. Извините, работаем над этим.
не вижу рекламы на этом сайте. сорри, фаерфокс все режет. но автору спасибо :-*
автору ОГРОМНОЕ спасибо! Побольше бы таких ресурсов в РУнете!
Отлично, а насколько сложно сделать чтобы пункты меню закрывались не повторным нажатием, а при нажатии на другие пункты?
to shark182: совсем не сложно - при нажатии на пункт сначала закрывайте все, а затем открывайте тот, на который нажали.
to Alek Veritov: Не ожидал настолько быстрой реакции. Нельзя ли подробнее? Меню например с одним уровнем вложенности. Думаю это дополнение пригодится и другим.
to Alek Veritov: У меня уже цифры с ника выпадать стали от мозгового штурма. I need help! Как сначала закрыть все ветки и открыть нужную?
P.S. А я вам на баннер кликну))
Подскажите пожалуйста как можно запомнить позицию на которой открыто дерево. Чтоб оно не сворачивалось после обновления страницы
Запомнить позицию можно в куках или в сессии, а при обновлении восстанавливать.
Спасибо Автору, респект за простоту =))) все просто до ужаса =))) а самое главное я нашел в этом то что искал !!!