Прокрутите до вида, чтобы щелкнуть аккордеонный элемент - PullRequest
Новая
       36

Прокрутите до вида, чтобы щелкнуть аккордеонный элемент

3 голосов
/ 17 апреля 2019

Я делаю словарь русского языка, в котором записи для ключевых слов вставляются в аккордеонные элементы.Информация внутри аккордеона взята из базы данных PHPmyadmin.Пока все хорошо: мне удалось настроить базу данных и механизм аккордеона, и, таким образом, новый контент корректно корректируется на странице index.php всякий раз, когда я добавляю новую информацию в базу данных.

Однако, еслиЯ щелкаю по элементу аккордеона в нижней части экрана, мне нужно прокрутить вручную вниз до поля содержимого с определениями ключевого слова.Следующее:

Unclicked accordion item Clicked accordion item, unscrolled Manually scrolled to selected accordion item

Вот мой сокращенный код:

CSS: 

.accordionWrapper { (...) }
.accordionItem { (...) }
.accordionItemHeading {
cursor: pointer; (...) 
}
.close .accordionItemContent {
                height:0px;
                -webkit-transform: scaleY(0);
                float:left;
                display:block;
            }
.open .accordionItemContent {
                (...)
                display:block;
                -webkit-transform: scaleY(1);
                -webkit-transform-origin: top;
                box-sizing: border-box;
            }
 .open .accordionItemHeading {
                margin:0px;
                -webkit-border-top-left-radius: 3px;
                -webkit-border-top-right-radius: 3px;
                -webkit-border-bottom-right-radius: 0px;
                -webkit-border-bottom-left-radius: 0px;
                (...)
            }
(...)

HTML / PHP 

<div class="accordionWrapper">
<div class='accordionItem close'>

<h2 class='accordionItemHeading'> <!--PHP здесь--> </h2>

<div class='accordionItemContent'>
<!--PHP здесь -->
</div>

</div>
</div>

Javascript: 

<script>   
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
var accCon = document.getElementsByClassName('accordionItemContent');

for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
      }
function toggleItem() {
     var itemClass = this.parentNode.className;
     for (i = 0; i < accItem.length; i++) {
               accItem[i].className = 'accordionItem close';
                    }
      if (itemClass == 'accordionItem close') {
               this.parentNode.className = 'accordionItem open';
               accItem[i].scrollIntoView();

                    }
                }
</script>

Внутри оператора if я пытался ввести accItem[i].scrollIntoView();, но бесполезно.Все, что я мог найти в Интернете, относилось к команде scrollIntoview о прокрутке до заданного идентификатора, нажав на кнопку навигации в другом месте.Я просто хочу, чтобы экран автоматически прокручивался вниз к элементу аккордеона, на который только что щелкнули.Мне не нужна анимация или плавный переход.

Спасибо за вашу помощь заранее.

...