Question

我是jQuery的新手。我正在尝试jQuery UI手风琴功能，并有一个问题，以显示它在正确的位置。我看到下面的问题没有回答，可能是相似但比我更复杂，因为它涉及到我不使用的scrollTo。 jQuery scrollTo accordion end position

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

Here是小提琴代码。

请帮忙。谢谢！

Answer 1

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

$("#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);          
  }
});

编辑：要解决注释中描述的问题，请在accordion的change事件处理程序中使用以下代码：

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

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

jsFiddle是here。

手风琴展示位置

1 个答案: