0

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

<table>
  <tr>
    <th>Имя</th>
    <th>Состояние</th>
    <th>Дата</th>
  </tr>
  <tr>
    <td>
      <button id="main" 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>
      </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>
.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;
}
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";
        }
      });
    });
  }
}

0

Ваш ответ

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

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