Форум

Webroller · #1 (**permalink**) 31.10.2010, 15:45

Здравствуйте!

Есть готовый скрипт позволяющий организовать древовидную структуру:

<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>

Работает все отлично, но хочу сделать так, чтобы при клике к примеру на "Мебель" при открытом разделе "Техника", "Техника" полностью сворачивалась и открывлся раздел "Мебель". Т.е. чтобы нельзя было все разделы развернуть одновременно

К сожалению не понимаю как это сделать

Надеюсь понятно объяснил

Заранее благодарен за помощь!

2de · #2 (**permalink**) 01.11.2010, 12:11

Я бы сделал немного по другому:

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 и потом скрывать её и всех родителей, это будет быстрее выполнятся если список слишком большой будет.

Webroller · #3 (**permalink**) 02.11.2010, 03:54

Спасибо вам большое!

Форум

Справочник

Discord чат

Курсы javascript