Я делаю словарь русского языка в виде аккордеона, где каждое слово в своей ячейке.
Сейчас мне надо, чтобы ящик содержания каждой ячейки автоматически расположился в центре экрана при щелчке на ячейку выбранного слова.
Если щёлкну ячейку "число", например, так произойдёт:
Надо прокручивать вручную до желаемого содержания:
Что делать? Я читал о команде scrollIntoView, но не знаю, как её приложить к моему аккордеону. Вот отрывки моего кода:
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';
accCon.scrollIntoView();
}
}
</script>
Весь код работает, кроме строки accCon.scrollIntoView();. Заранее спасибо за помощь!
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Как сделать чтобы сова была в 2 раза меньше?Нужно чтобы только сова стала в 2 раза меньше а все остальные элементы оставались без изменения
скачал сборку с гитхаба и хотел бы проверить ее у себя, но проблема не устанавливается - собака