Пытаюсь вычислить высоту блока, что бы сделать плавную анимацию. Подскажите как правильно узнать количество потомков li в текущем ul ? Пытасю так let length = e.target.childNodes.length; но почему-то возвращает 19 вместо 9-ти.
let formStep3 = document.querySelector('#step3');
formStep3.addEventListener('click', e => {
if(e.target.classList.contains('optionList-active')){
e.target.classList.remove('optionList-active');
e.target.style.height = "40px";
} else if (e.target.classList.contains('optionList')){
e.target.classList.add('optionList-active');
// e.target.style.height = "100%";
let length = e.target.childNodes.length;
e.target.style.height = length*36+'px' ;
alert(length);
}
});
.optionList{
overflow: hidden;
line-height: 40px;
color: #fff;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
background: linear-gradient(90deg, rgba(161,161,161,1) 0%, rgba(29,86,133,1) 0%, rgba(0,52,82,1) 100%, rgba(0,142,255,1) 100%);
position: relative;
height: 40px;
transition: all 1s ease-in-out;
}
.optionList-active{
/* height: 100%; */
}
.optionList:after{
content: '';
display: block;
position: absolute;
top: 10px;
right: 15px;
width: 20px;
height: 20px;
background: url(../img/configurator/arrowWhite.png) no-repeat;
background-position: center;
background-size: contain;
}
.configurator-button {
cursor: pointer;
width: 673px;
background-color: #03617f;
color: #ffffff;
font-family: "Century Gothic";
font-size: 18px;
font-weight: 400;
line-height: 36px;
margin: 0;
text-align: center;
cursor: pointer;
vertical-align: middle;
}
.configurator-button:hover {
background-color: #059DC3;
}
#step3 {
max-height: 260px;
overflow-y: scroll;
padding-right: 15px;
}
<form class="configurator-form-1" id="step3">
<ul class="optionList">Установка тахографа
<li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
<li class="configurator-button configOptions">Установка цифрового тахогр</li>
<li class="configurator-button" >Установка цифрового тахографа </li>
<li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
<li class="configurator-button configOptions">Установка цифрового тахогр</li>
<li class="configurator-button" >Установка цифрового тахографа </li>
<li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
<li class="configurator-button configOptions">Установка цифрового тахогр</li>
<li class="configurator-button" >Установка цифрового тахографа </li>
</ul>
<ul class="optionList">Установка тахографа 2
<li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
<li class="configurator-button configOptions">Установка цифрового тахогр</li>
<li class="configurator-button" >Установка цифрового тахографа </li>
</ul>
<ul class="optionList">Установка тахографа 2
<li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
<li class="configurator-button configOptions">Установка цифрового тахогр</li>
<li class="configurator-button" >Установка цифрового тахографа </li>
</ul>
<ul class="optionList">Установка тахографа
<li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
<li class="configurator-button configOptions">Установка цифрового тахогр</li>
<li class="configurator-button" >Установка цифрового тахографа </li>
</ul>
<ul class="optionList">Установка тахографа 2
<li class="configurator-button configOptions">Тахограф (эксплуатация по </li>
<li class="configurator-button configOptions">Установка цифрового тахогр</li>
<li class="configurator-button" >Установка цифрового тахографа </li>
</ul>
</form>
CODPEN**