Нужно сделать многоуровневый меню аккордеон

Question

Нужно сделать многоуровневый меню аккордеон

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

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

Проблемы:

1.При спуске на 3й уровень ,хочу его закрыть, но закрывается весь аккордеон.

2.На всех дочерних ячейках должен быть + вместо -.

3.При открытии ячейки Состояние и Дата меню работает не корректно.

function arcad() {
  var coll = document.getElementsByClassName("collapsible");
  var i;
  let heightArray = [];
  for (let i = 0; i < coll.length; i++) {
    heightArray.push(coll[i].nextElementSibling.scrollHeight);
  }
  for (let i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.closest('tr').querySelectorAll('.collapsible').forEach(function(o) {
        o.classList.toggle("active");
        var content = o.nextElementSibling;
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
          for (let prevContent = 0; prevContent < i; prevContent++) {
            let sumHeight = 0;
            for (let prevContent = 0; prevContent <= i; prevContent++) {
              sumHeight = sumHeight + heightArray[prevContent];
            }
            coll[prevContent].nextElementSibling.style.maxHeight = sumHeight + 'px';
          }
        }
      });
    });
  }
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<table>
  <tr>
    <th>Имя</th>
    <th>Состояние</th>
    <th>Дата</th>
  </tr>
  <tr>
    <td>
      <button class="collapsible">Пациент №1</button>
      <div class="content">
        <p>Петр</p>
        <button class="collapsible">Пациент №1.1</button>
        <div class="content">
          <p>Сын Петра</p>
          <button class="collapsible">Пациент №1.1.1</button>
          <div class="content">
            <p>Сын сына Петра</p>
          </div>
        </div>

    </td>
    <td>
      <button class="collapsible">Состояние здоровья</button>
      <div class="content">
        <p>Здоровый</p>
        <button class="collapsible">Состояние здоровья</button>
        <div class="content">
          <p>Нужно проверится </p>
          <button class="collapsible">Состояние здоровья</button>
          <div class="content">
            <p>Нужно проверится </p>
          </div>
        </div>

    </td>
    <td>
      <button class="collapsible">Дата посещения</button>
      <div class="content">
        <p>10.02.2023, 0:28</p>
        <button class="collapsible">Дата посещения</button>
        <div class="content">
          <p>10.02.2023, 18:28 </p>
          <button class="collapsible">Дата посещения</button>
          <div class="content">
            <p>10.02.2023, 18:28 </p>
          </div>
        </div>

    </td>

  </tr>
</table>

css javascript html

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

Нужно сделать многоуровневый меню аккордеон

Ответы