3

我正在制作一本俄语词典，其中将关键字条目插入到手风琴元素中。手风琴内部的信息取自 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。我只想让屏幕自动向下滚动到刚刚单击的手风琴项。我不需要任何动画或平滑过渡。

提前谢谢你的帮助。

4

0 回答 0