Почему не работает код аккордиона?

209
17 мая 2018, 18:50

Код вообще не реагирует на клики, в чем может быть проблема?

var elements = document.querySelectorAll('.accordion_item'); 
for (var i = 0; i < elements.lenght; i++) { 
  elements[i].onclick = function() { 
    console.log(1); 
    for(var j = 0; j < elements.lenght; j++) { 
      if(elements[j].classList.contains('open') == true) { 
        elements[j].classList.remove('open'); 
        elements[j].lastChild.style.height = '0'; 
      } 
    } 
    var accordionContent = this.lastChild; 
    var accordionContentStyle = getComputedStyle(accordionContent); 
    if (parseInt(accordionContentStyle) == 0) { 
      accordionContent.style.height = scrollHeight + 'px'; 
      accordionContent.classList.add('open'); 
    } else { 
      accordionContent.style.height = 0; 
      accordionContent.classList.remove('open'); 
    } 
  } 
}
* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  backgoround-color: #ddddd; 
} 
 
.wrapper { 
  margin: 30px; 
  max-width: 600px; 
} 
 
.accordion_item { 
  margin-top: 4px; 
} 
 
.accordion_name { 
  padding: 10px; 
  cursor: pointer; 
  position: relative; 
} 
 
.accordion_name h2 { 
  position: relative; 
  z-index: 3; 
  display: inline-block; 
  pointer-events: none; 
} 
 
.accordion_name h2:hover svg { 
  stroke: orange; 
} 
 
svg { 
  stroke: transparent; 
  position: absolute; 
  fill: #dddddd; 
  height: 100%; 
  width: 100%; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 0; 
  transition: 0.2s; 
} 
 
svg:hover { 
  stroke: orange; 
} 
 
.accordion_content { 
  height: 0; 
  overflow: hidden; 
}
<div class="wrapper"> 
  <div class="accordion_item"> 
    <div class="accordion_name"> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none"> 
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/> 
</svg> 
      <h2>One accordiont line</h2> 
    </div> 
    <div class="accordion_content"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam. 
    </div> 
  </div> 
  <div class="accordion_item"> 
    <div class="accordion_name"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none"> 
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/> 
</svg> 
      <h2>One accordiont line</h2> 
    </div> 
    <div class="accordion_content"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam. 
    </div> 
  </div> 
  <div class="accordion_item"> 
    <div class="accordion_name"> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none"> 
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/> 
</svg> 
      <h2>One accordiont line</h2> 
    </div> 
    <div class="accordion_content"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam. 
    </div> 
  </div> 
</div>

Answer 1

Не lenght , а length.

Не this.lastChild , а this.lastElementChild

А дальше scrollHeight нужно как минимуму взять у какого-то элемента, но контент который вы открываете он уже равен нулю.

Если не нужна плавная анимация открытия, то достаточно значения 'auto', если нужна, тогда думайте, как вместо 'auto' подставить нужную высоту

var elements = document.querySelectorAll('.accordion_item'); 
for (var i = 0; i < elements.length; i++) { 
  elements[i].onclick = function() { 
    for(var j = 0; j < elements.length; j++) { 
      if(elements[j].classList.contains('open') == true) { 
        elements[j].classList.remove('open'); 
        elements[j].lastChild.style.height = '0'; 
      } 
    } 
    var accordionContent = this.lastElementChild; 
    var accordionContentStyle = getComputedStyle(accordionContent); 
    if (parseInt(accordionContentStyle.getPropertyValue("height")) == 0) { 
      accordionContent.style.height = 'auto'; 
      accordionContent.classList.add('open'); 
    } else { 
      accordionContent.style.height = 0; 
      accordionContent.classList.remove('open'); 
    } 
  } 
}
* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  backgoround-color: #ddddd; 
} 
 
.wrapper { 
  margin: 30px; 
  max-width: 600px; 
} 
 
.accordion_item { 
  margin-top: 4px; 
} 
 
.accordion_name { 
  padding: 10px; 
  cursor: pointer; 
  position: relative; 
} 
 
.accordion_name h2 { 
  position: relative; 
  z-index: 3; 
  display: inline-block; 
  pointer-events: none; 
} 
 
.accordion_name h2:hover svg { 
  stroke: orange; 
} 
 
svg { 
  stroke: transparent; 
  position: absolute; 
  fill: #dddddd; 
  height: 100%; 
  width: 100%; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 0; 
  transition: 0.2s; 
} 
 
svg:hover { 
  stroke: orange; 
} 
 
.accordion_content { 
  height: 0; 
  overflow: hidden; 
}
<div class="wrapper"> 
  <div class="accordion_item"> 
    <div class="accordion_name"> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none"> 
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/> 
</svg> 
      <h2>One accordiont line</h2> 
    </div> 
    <div class="accordion_content"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam. 
    </div> 
  </div> 
  <div class="accordion_item"> 
    <div class="accordion_name"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none"> 
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/> 
</svg> 
      <h2>One accordiont line</h2> 
    </div> 
    <div class="accordion_content"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam. 
    </div> 
  </div> 
  <div class="accordion_item"> 
    <div class="accordion_name"> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -1 202 34" preserveAspectRatio="none"> 
<path d='M200 32 L0 32, 0 0, 65 0, 110 32' stroke-width='1'/> 
</svg> 
      <h2>One accordiont line</h2> 
    </div> 
    <div class="accordion_content"> 
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi omnis fugiat sed. Enim ipsum rerum iure quisquam. 
    </div> 
  </div> 
</div>

READ ALSO
Стили для SVG Object

Стили для SVG Object

Подключаем SVG через Object:

189
Как оптимизировать указанный jQuery код?

Как оптимизировать указанный jQuery код?

Как оптимизировать данный код, или лучше уже нельзя?

197
Как оптимизировать анимацию по hover (css / html / jquery)?

Как оптимизировать анимацию по hover (css / html / jquery)?

Написал анимацию выпадающего списка меню при hover на его родителя

234
Адаптивность анимации в JQuery под размер окна

Адаптивность анимации в JQuery под размер окна

Доброго всем времени суток!

180