Не пойму в чем проблема. Есть код меню дерева, но он работает не корректно. Нужно чтобы он опускался и поднимался на уровень, а у меня сразу поднимаются и опускаются все уровни.
Вот так должно выглядеть при при одно клике, чтобы открывались сразу все столбцы
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
ul,
#myUL {
list-style-type: none;
}
/* Удалите поля и отступы из родительского ul */
#myUL {
margin: 0;
padding: 0;
}
/* Стиль курсора/стрелки */
.caret {
cursor: pointer;
user-select: none;
/* Запретить выделение текста */
}
/* Создайте курсор/стрелку с юникодом, и стиль его */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
/* Поверните значок курсора/стрелки при нажатии (с помощью JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Скрыть вложенный список */
.nested {
display: none;
}
/* Показать вложенный список, когда пользователь нажимает на курсор стрелку (с JavaScript) */
.active {
display: block;
}
<table>
<tr>
<th>Имя</th>
<th>Состояние</th>
<th>Дата</th>
</tr>
<tr>
<td>
<ul id="myUL">
<li><span class="caret">Напитки</span>
<ul class="nested">
<li>Water</li>
<li>Кофе</li>
<li><span class="caret">Чай</span>
<ul class="nested">
<li>Черный чай</li>
<li>Белый чай</li>
<li><span class="caret">Зеленый чай</span>
<ul class="nested">
<li>Сенча</li>
<li>Гекуро</li>
<li>Матча</li>
<li>Пи Ло Чун</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<ul id="myUL">
<li><span class="caret">Напитки</span>
<ul class="nested">
<li>Water</li>
<li>Кофе</li>
<li><span class="caret">Чай</span>
<ul class="nested">
<li>Черный чай</li>
<li>Белый чай</li>
<li><span class="caret">Зеленый чай</span>
<ul class="nested">
<li>Сенча</li>
<li>Гекуро</li>
<li>Матча</li>
<li>Пи Ло Чун</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<ul id="myUL">
<li><span class="caret">Напитки</span>
<ul class="nested">
<li>Water</li>
<li>Кофе</li>
<li><span class="caret">Чай</span>
<ul class="nested">
<li>Черный чай</li>
<li>Белый чай</li>
<li><span class="caret">Зеленый чай</span>
<ul class="nested">
<li>Сенча</li>
<li>Гекуро</li>
<li>Матча</li>
<li>Пи Ло Чун</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>