Сделано дерево в списках ul li, канонично, в общем. Класс .tree_menu ul - по умолчанию для всех не коренных UL. Класс ul.menu_hide вешается на все некоренные UL и их, соответственно не видно. Разница там только в max-height как видите:
Код:
|
.tree_menu ul {
max-height: 2000px;
overflow: hidden;
background-color:#F0F0F0;
transition: all 1s ease ;
}
ul.menu_hide {
max-height: 0px;
overflow: hidden;
background-color:#F0F0F0;
} |
Кусок хтмля.
<li id="menu4"><a href="#">Категория</a>
<ul class="menu_hide">
<li id="menu5"><a href="#">Суб категория</a>
<ul class="menu_hide">
<li id="menu6"><a href="url">Продукт1</a></li>
<li id="menu7"><a href="url">Продукт2</a></li>
</ul>
</li>
<li id="menu8"><a href="#">Суб категория</a>
<ul class="menu_hide">
<li id="menu9"><a href="url">Продукт3</a></li>
<li id="menu10"><a href="url">Продукт4</a></li>
</ul>
</li>
</ul>
</li>
Ява-скрипт развешивает события щелчка и в принципе больше ничего не делает кроме отключения/включения выбранного UL. Поскольку UL выбрать нельзя, он просто находится как parent щелкнутого LI:
var child_ul = find_child_ul(this);
if(child_ul)
child_ul.classList.toggle('menu_hide');
Так вот, в принципе все работает. Щелкнутый пункт (визуально) раскрывается с анимацией, и скрывается с анимацией но перед закрытием он думает ровно столько, сколько длится анимация. То есть там 1 секунда нарисована, браузер 1 секунду думает прежде чем за следующую секунду свернуть UL с глаз долой.
Вопрос, откуда берется пауза, как ее избежать применительно к представленной структуре, или как вообще это сделать.