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

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

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:

<ul>
<li>something1</li>
<li>something2</li>
<li>something3</li>
<li><a onclick="tree('s')">something4sublist</a>
<ul>
<li id="s1" style="display: none;">something41</li>
<li id="s2" style="display: none;"><a onclick="tree('x')">something42sublist</a>
<ul>
<li id="x1" style="display: none;">something421</li>
<li id="x2" style="display: none;">something422</li>
</ul>
</li>
<li id="s3" style="display: none;">something43</li>
</ul>
</li>
<li>something5</li>
</ul>

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

проблемы:

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

Добавлено: 20 Апреля 2018 16:15:32 Добавил: Андрей Ковальчук Нравится 0

Добавить