Блог

Чтобы управлять свойством высоты, поэтому я использую javascript, а не jquery, тогда у меня возникла проблема.
Проблема в том, что я не могу изменить высоту обратно на ноль, как только я установил высоту прокрутки элемента.

Вот мой js-код:

 let isClosed = true;
var cals = document.getElementsByClassName('h-strench-box');

for (var i = 0; i < cals.length; i   ) {
   cals[i].addEventListener('click', function(e) {
       if (isClosed) {
           this.classList.add('h-strench-box-out');
           var content = this.querySelector('.h-strench-content');
           content.style.height = content.scrollHeight   'px';
           isClosed = false;
       } else {
           if (this.classList.contains('h-strench-box-out')) {
               this.classList.remove('h-strench-box-out');

               // this.querySelector('.h-strench-content').style.height = '0';
               // This not working
               isClosed = true;
           } else {
               for (var j = 0; j < cals.length; j   ) {
               cals[j].classList.remove('h-strench-box-out');
               cals[j].querySelector('.h-strench-content').style.height = '0';
               // This not working
               }
           this.classList.add('h-strench-box-out');
           var content = this.querySelector('.h-strench-content');
           content.style.height = content.scrollHeight   'px';
           }
        }
                        
    });
}
 

CSS

 .h-strench-content {
    height: 0;
    padding: 0;
    display: none;
    overflow: hidden;
    transition: height 0.4s ease-in;
}
.h-strench-box-out .h-strench-content {
    display: block;
}
.h-strench-btn {
    transition: transform 0.3s ease-out;
}
.h-strench-btn::before {
    content: 'f13a';
    font-family: "Font Awesome 5 Free";
    font-size: 27px;
    font-weight: 600;
}
 

Еще один вопрос. Как я могу изменить значение высоты(B), а не element.style (A). Пожалуйста, сравните изображение ниже. Пожалуйста, помогите, спасибо!

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

Что касается css: Высота A является встроенным css, что означает, что он всегда будет иметь приоритет над высотой B, если высота B не отмечена !important . Чтобы вернуться к высоте B, высоту A необходимо полностью удалить с помощью свойства удалить или просто установить значение null.

 var obj = document.getElementById('name');
obj.style.removeProperty('height');
// if you want to return the old value...
// var oldValue = obj.style.removeProperty('height');
 

Если вы хотите изменить содержимое таблицы стилей, см. Этот пример:

 var declaration = document.styleSheets[0].rules[0].style;
var oldValue = declaration.removeProperty('height');
 

… Однако будьте осторожны с примером таблицы стилей, так как изменение индексов может сбить это с толку. Было бы гораздо безопаснее найти альтернативу, которая вместо этого добавляет/удаляет классы с нужными вам значениями.