1

私はjQueryの初心者です。jQuery UI アコーディオン機能を試していますが、適切な位置に表示するのに問題があります。以下の質問は、私が使用していない scrollTo が含まれているため、私のものよりも似ているかもしれませんが、回答なしで尋ねていることがわかります。 jQuery scrollTo アコーディオン終了位置

私の質問は簡単です。jQuery Web サイトのアコーディオン サンプル コードを使用して、最初のパネルに長いコンテンツを配置した場合。2 番目のパネルははるかに低い位置にプッシュされるため、下にスクロールしてパネルを見つける必要があります。2 番目のパネルをクリックすると、ブラウザはアコーディオンの上部、または少なくとも 2 番目のパネルの上部に移動しません。2 番目のパネルのコンテンツを見る前に、ユーザーは上にスクロールする必要があります。

これがフィドルコードです。

親切に助けてください。ありがとう！

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 に答える