1

我是 jQuery 的新手。我正在尝试 jQuery UI 手风琴功能，但无法将其显示在正确的位置。我看到下面的问题没有回答，这可能与我的相似但比我的更复杂，因为它涉及我不使用的 scrollTo 。 jQuery scrollTo 手风琴结束位置

我的问题很简单。当我只使用 jQuery 网站上的手风琴示例代码并将长内容放在第一个面板中时。第二个面板将被推到一个低得多的位置，您需要向下滚动才能找到该面板。当您单击第二个面板时，浏览器不会将您定向到手风琴的顶部或至少是第二个面板的顶部。用户需要向上滚动才能看到第二个面板中的内容。

这是小提琴代码。

请帮助。谢谢！

4

1 回答 1

2

您可以设置代码以在打开的面板更改时滚动到新面板的顶部，如下所示：

$("#accordion").accordion({
  change : function (event, ui) {
      $('html, body').animate({
         scrollTop: $(ui.newHeader).offset().top
      }, 500);          
  }
});

您可能还想autoHeight: false在手风琴上设置，以保持每个面板的大小与其内容一致。

$("#accordion").accordion({
  autoHeight: false,
  change : function (event, ui) {
      $('html, body').animate({
         scrollTop: $(ui.newHeader).offset().top
      }, 500);          
  }
});

编辑：要解决评论中描述的问题，请在手风琴的更改事件处理程序中使用以下代码：

if(ui.newHeader.length > 0) {
    $('html, body').animate({
        scrollTop: $(ui.newHeader).offset().top
    }, 500);
}

这将防止在所有面板都关闭时发生错误。

一个 jsFiddle 在这里。

于 2012-07-29T15:30:56.407 回答