Меню дерево в несколько столбцов

Рейтинг: 0Ответов: 1Опубликовано: 16.02.2023

Не пойму в чем проблема. Есть код меню дерева, но он работает не корректно. Нужно чтобы он опускался и поднимался на уровень, а у меня сразу поднимаются и опускаются все уровни.

Вот так должно выглядеть при при одно клике, чтобы открывались сразу все столбцы

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>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Нужно чтобы он опускался и поднимался на уровень, а у меня сразу поднимаются и опускаются все уровни.

Ты не верно отрабатывал клик по элементу. Они ведь все содержатся внутри друг друга. И ИД у тебя повторяется, а оно должно быть уникальным на странице.

Почитай про всплытие событий. https://learn.javascript.ru/event-bubbling

Посмотри мой вариант. Я использую делегирование событий https://learn.javascript.ru/event-delegation

const ot = document.querySelector('table')
ot.addEventListener('click', e => {
  const o = e.target
  if (!o.classList.contains('caret')) return
  const ob = o.closest('li').querySelector('.nested')
  ob.classList.toggle("active")
  ob.classList.toggle("caret-down")
  const a = [...o.closest('td').querySelectorAll('.nested')].map(o => o.className)
  ot.querySelectorAll('td').forEach(o => {
    o.querySelectorAll('.nested').forEach((o, i) => {
      o.className = a[i]
    })
  })
})
td {
  vertical-align: top;
}

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>