0

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

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

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>

1 ответ 1

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>

8
  • я посмотрел код, функционал вроде никакой не поменялся
    – Костя
    16 фев в 16:58
  • @Костя, так лучше видно? Я убрал твой, закомментированный вариант.
    – ksa
    16 фев в 17:02
  • код то помелся, а сам процесс нет
    – Костя
    16 фев в 17:18
  • @Костя, теперь каждый пункт открывается отдельно от других.
    – ksa
    16 фев в 17:22
  • @Костя, добавил еще стиль для ячеек...
    – ksa
    16 фев в 17:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.