使用jQuery手风琴控件,如何将其滚动到屏幕上所选的项目?
什么时候:
>我有一个手风琴项目,内容大于可视窗口
>我向下滚动到第二个手风琴项目
>我点击第二个手风琴项目显示它
>第一个手风琴选项折叠,第二个打开,但滑过屏幕。
是否有选择手风琴滚动到第二个项目?
解决方法
您可以尝试使用
scrollTo jQuery plugin.它可以让你做这样的事情:
$.scrollTo('div#foo'); // scroll the browser window so div#foo is in view $('div#foo').('#bar'); // scroll within div#foo so #bar is in view
将ScrollTo()绑定到手风琴激活事件,如下所示:
$('#youraccordion').bind('accordionactivate',function(event,ui) { /* In here,ui.newHeader = the newly active header as a jQ object ui.newContent = the newly active content area */ $( ui.newHeader ).ScrollTo(); // or ui.newContent,if you prefer });
手风琴激活事件何时触发?
Triggered after a panel has been activated (after animation completes). If the accordion was prevIoUsly collapsed,
ui.oldHeader
andui.oldPanel
will be empty jQuery objects. If the accordion is collapsing,ui.newHeader
andui.newPanel
will be empty jQuery objects.
参考文献:jQuery UI Accordion