我正在制作一本俄语词典,其中将关键字条目插入到手风琴元素中。手风琴内部的信息来自PHPmyadmin数据库。到目前为止,一切顺利:我设法设置了数据库和手风琴机制,因此,每当我向数据库中添加新信息时,新内容就会正确地调整到index.php页面。
但是,如果我单击屏幕底部的手风琴项目,则需要手动向下滚动到带有关键字定义的内容框。如下:
这是我的缩写代码:
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命令有关的所有内容,都是通过单击其他地方的导航按钮来滚动到给定的ID。我只希望屏幕自动向下滚动到刚刚单击的手风琴项目。我不需要任何动画或平滑过渡。
谢谢您的帮助。