1

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

Проблемы:

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 onclick="arcad()" class="collapsible">Пациент №1</button>
      <div class="content">
        <p>Петр</p>
        <button onclick="arcad()" class="collapsible">Пациент №1.1</button>
        <div class="content">
          <p>Сын Петра</p>
          <button onclick="arcad()" class="collapsible">Пациент №1.1.1</button>
          <div class="content">
            <p>Сын сына Петра</p>
          </div>
        </div>

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

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

    </td>

  </tr>
</table>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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