如何在使用jQuery Accordion时停止页面向下滚动

I am using jQuery UI Accordion in my App, one problem I have is: inside the 2nd tab, there is a very long form. Everytime when user come to the 2nd tab, the page automatically scroll down to the bottom of the form. even after I hard code and set the focus to the first text box of the form.

我在我的应用程序中使用jQuery UI Accordion,我遇到的一个问题是:在第二个选项卡中,有一个很长的表单。每当用户进入第二个选项卡时,页面会自动向下滚动到表单的底部。甚至在我硬编码并将焦点设置到表单的第一个文本框之后。

any ideas?

thank you all in advance

谢谢大家

3 个解决方案

#1

Well i have tried to sue focus while index change, however, at least, it doesn't work for me. here is my final solution which is turn off the animation in accordion UI:

好吧,我试图在索引更改时起诉焦点,但是,至少,它对我不起作用。这是我的最终解决方案,它关闭了手风琴UI中的动画:

$("#accordion").accordion(
                     {
                         autoHeight: false,
                         animated: false,
                         active: parseInt(index),
                         event: ""
                     }
);

Thank you for your answer.

谢谢您的回答。

#2

The page scrolling effect is an artifact of activating (either automatically or manually) an accordion option.

页面滚动效果是激活(自动或手动)手风琴选项的工件。

The following code in the _toggle function of the ui.accordion widget (ui version 1.8.24) makes an explicit call to the focus method:

ui.accordion小部件(ui版本1.8.24)的_toggle函数中的以下代码显式调用focus方法:

toShow.prev()
    .attr({
        "aria-expanded": "true",
        "aria-selected": "true",
        tabIndex: 0
    })
    .focus();

This feature was removed in jQuery UI version 1.9.0 circa October 2012.

此功能已于2012年10月左右在jQuery UI 1.9.0版中删除。

To eliminate the page scrolling down effect, either remove the .focus() method call or upgrade to a newer version of jQuery UI (recommended).

要消除页面向下滚动效果,请删除.focus()方法调用或升级到更新版本的jQuery UI(推荐)。

#3

I'm not sure without some code if this works, but there is a change event which according to the doco:

我不确定没有一些代码,如果这有效,但根据doco有一个改变事件:

This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.

每次手风琴改变时都会触发此事件。如果手风琴是动画的,则动画完成后将触发该事件;否则,立即触发。

So is it possible to use this event and set focus to a valid target once the expand has happened.

因此,可以使用此事件,并在扩展发生后将焦点设置为有效目标。

I have tested this with the according demo /demos/according/default.html and it is called after the expand:

我已经使用相应的演示/demos/according/default.html测试了它,并在扩展后调用它:

<script type="text/javascript">
$(function() {
    $("#accordion").accordion({
        change: function(event, ui) {
            alert('blah');
            // Add your focus code in here
        }
    });
});
</script>

I'd also like to mention in all cases I have used the accordian the page doesn't jump down after expanding.

我还想提一下,在所有情况下我都使用了手风琴,页面在扩展后没有跳下来。

#1