Древовидный список
Здравствуйте!
Есть готовый скрипт позволяющий организовать древовидную структуру:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript">
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++;
}
}
</script>
<style type="text/css"> .h { display:none } </style>
</head>
<body>
<ul class="list">
<li><a href="javascript:void(0);" onclick="tree('q')">Мебель</a></li>
<ul>
<li id="q1" class="h">Деверяшка 1</li>
<li id="q2" class="h">Деверяшка 2</li>
</ul>
<li><a href="javascript:void(0);" onclick="tree('s')">Техника</a>
<ul>
<li id="s1" class="h"><a href="javascript:void(0);" onclick="tree('a')">Ноутбуки</a></li>
<ul>
<li id="a1" class="h">Apple</li>
<li id="a2" class="h">HP</li>
</ul>
<li id="s2" class="h"><a href="javascript:void(0);" onclick="tree('x')">Компьютеры</a>
<ul>
<li id="x1" class="h">Мышки</li>
<li id="x2" class="h">Клавиатуры</li>
</ul>
</li>
<li id="s3" class="h">Что-то еще</li>
</ul>
</li>
</ul>
</body>
</html>
Работает все отлично, но хочу сделать так, чтобы при клике к примеру на "Мебель" при открытом разделе "Техника", "Техника" полностью сворачивалась и открывлся раздел "Мебель". Т.е. чтобы нельзя было все разделы развернуть одновременно :) К сожалению не понимаю как это сделать :( Надеюсь понятно объяснил :) Заранее благодарен за помощь! |
Я бы сделал немного по другому:
id указаля бы для списка вцелом а не для элемнетов списка, тоесть это:
<ul>
<li id="q1" class="h">Деверяшка 1</li>
<li id="q2" class="h">Деверяшка 2</li>
</ul>
заменил на это:
<ul id="q">
<li class="h">Деверяшка 1</li>
<li class="h">Деверяшка 2</li>
</ul>
и указал бы: <ul class="list" id="list"> можно даже в ЦСС переписать из класса на айдишник а перед разворачиванием дерева написал бы такой код:
var i,Items=document.getElementById("list").getElementsByTagName("ul");
for(i=0;i<Items.length;i++) Items.style.display="none";
Ещё вариант, если всегда будет открыто только одна ветка, то можно сохранять её id и потом скрывать её и всех родителей, это будет быстрее выполнятся если список слишком большой будет. |
Спасибо вам большое! :)
|
| Часовой пояс GMT +3, время: 08:00. |