滚动到视图中以单击手风琴项目

时间:2019-04-17 13:58:22

标签: javascript accordion js-scrollintoview

我正在制作一本俄语词典,其中将关键字条目插入到手风琴元素中。手风琴内部的信息来自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命令有关的所有内容,都是通过单击其他地方的导航按钮来滚动到给定的ID。我只希望屏幕自动向下滚动到刚刚单击的手风琴项目。我不需要任何动画或平滑过渡。

谢谢您的帮助。

0 个答案:

没有答案