JS click срабатывает только со второго раза

Question

Уважаемые знатоки, у меня вот такая проблема: Событие click срабатывает только со второго раза

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight === "0px") {
      content.style.maxHeight = "400px";
    } else {
      content.style.maxHeight = "0px    ";
    }
  });
}

.content {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #1c1c1c;
  color: #fff;
  font-size: 15px;
  text-align: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.collapsible {
  width: 100%;
  height: 170px;
  background-color: #fff;
  padding: 10px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

<div class="contacts__item">
  <div class="collapsible">
    <div class="coll__image"><img src="img/gallery/one__right.jpg"></div>
    <div class="coll__name">
      <p>Фамилия Имя Отчество</p>
    </div>
    <div class="coll__position">
      <p>Должность</p>
    </div>
  </div>
  <div class="content">
    <div class="coll__room">Комната: </div>
    <div class="coll__phone">Телефон: </div>
    <div class="coll__vk">
      <a href="#"></a>
    </div>
  </div>
</div>

Прошу взять в счёт ещё эту информацию: если я заменяю max-height на display, то у меня всё хорошо работает с первого раза

Answer 1

Проблема в том, что свойство style обращается к inline стилю, а в при первом обращении там нет ничего и вы туда кладёте значение, потому при втором обращении у вас всё работает. Проблема легко решается, если в вёрстке прописать начальные стили, например так:

var colls = document.getElementsByClassName("collapsible");

for (const coll of colls) {
  coll.addEventListener("click", function() {
    this.classList.toggle("active");
    
    const content = this.nextElementSibling;
    
    if (content.style.maxHeight === "0px") {
      content.style.maxHeight = "400px";
    } else {
      content.style.maxHeight = "0px";
    }
  });
}

.content {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #1c1c1c;
  color: #fff;
  font-size: 15px;
  text-align: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.collapsible {
  width: 100%;
  height: 170px;
  background-color: #fff;
  padding: 10px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

<div class="contacts__item">
  <div class="collapsible">
    <div class="coll__image"><img src="img/gallery/one__right.jpg"></div>
    <div class="coll__name">
      <p>Фамилия Имя Отчество</p>
    </div>
    <div class="coll__position">
      <p>Должность</p>
    </div>
  </div>
  <div class="content" style="max-height: 0px">
    <div class="coll__room">Комната: </div>
    <div class="coll__phone">Телефон: </div>
    <div class="coll__vk">
      <a href="#"></a>
    </div>
  </div>
</div>

Но так же можно и в JS просто добавить дополнительную проверку так:

var colls = document.getElementsByClassName("collapsible");

for (const coll of colls) {
  coll.addEventListener("click", function() {
    this.classList.toggle("active");

    const content = this.nextElementSibling;

    if (
      content.style.maxHeight === "0px" ||
      content.style.maxHeight === ''
    ) {
      content.style.maxHeight = "400px";
    } else {
      content.style.maxHeight = "0px";
    }
  });
}

.content {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #1c1c1c;
  color: #fff;
  font-size: 15px;
  text-align: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.collapsible {
  width: 100%;
  height: 170px;
  background-color: #fff;
  padding: 10px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

<div class="contacts__item">
  <div class="collapsible">
    <div class="coll__image"><img src="img/gallery/one__right.jpg"></div>
    <div class="coll__name">
      <p>Фамилия Имя Отчество</p>
    </div>
    <div class="coll__position">
      <p>Должность</p>
    </div>
  </div>
  <div class="content">
    <div class="coll__room">Комната: </div>
    <div class="coll__phone">Телефон: </div>
    <div class="coll__vk">
      <a href="#"></a>
    </div>
  </div>
</div>

Если прям очень сильно надо именно в CSS смотреть то вам нужно использовать Window.getComputedStyle():

var colls = document.getElementsByClassName("collapsible");

for (const coll of colls) {
  coll.addEventListener("click", function() {
    this.classList.toggle("active");

    const content = this.nextElementSibling;
    const contentStyles = getComputedStyle(content);

    if (contentStyles.getPropertyValue('max-height') === '0px') {
      content.style.maxHeight = "400px";
    } else {
      content.style.maxHeight = "0px";
    }
  });
}

.content {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #1c1c1c;
  color: #fff;
  font-size: 15px;
  text-align: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.collapsible {
  width: 100%;
  height: 170px;
  background-color: #fff;
  padding: 10px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

<div class="contacts__item">
  <div class="collapsible">
    <div class="coll__image"><img src="img/gallery/one__right.jpg"></div>
    <div class="coll__name">
      <p>Фамилия Имя Отчество</p>
    </div>
    <div class="coll__position">
      <p>Должность</p>
    </div>
  </div>
  <div class="content">
    <div class="coll__room">Комната: </div>
    <div class="coll__phone">Телефон: </div>
    <div class="coll__vk">
      <a href="#"></a>
    </div>
  </div>
</div>

БЛОГ НА HUSL

JS click срабатывает только со второго раза

Ответы (1 шт):