こんにちは: クリック可能なバナーの後ろに隠れて始まる div 内の記事のページがあります。バナーをクリックするたびに、関連する記事の div が slideToggle で拡張され、slideUp で開いている他の記事の div が閉じられます。次のコードがあります。ビューがクリックされたバナー div の最終位置の上から始まる場合、ウィンドウをその div までスクロールします。ただし、記事がその div の上で閉じると、記事はビューの外に移動し、ウィンドウはそこまでスクロールしません。どうすればこれを修正できますか?
$(document).ready(function () {
$(".entry-title-thumbnail-active").click(function () {
$(this).closest('.site-content').find('.entry-content-thumbnail').not($(this).closest('article').find('.entry-content-thumbnail')).slideUp('slow');
$(this).closest('article').find('.entry-content-thumbnail').slideToggle(
'slow', 'swing', $('html,body').animate({
scrollTop: $(this).offset().top
}, 'slow'));
return false;
});
});
基本的に、ロジックは DOM ツリーを上に移動し、すべてのバナーと記事の div を含む親の .site-content div に移動し、すべての子の .entry-content-thumbnail div を見つけて上にスライドさせます - クリックされた .entry の兄弟を除外します-title-thumbnail-active - 他の記事が表示されないようにします。次に、ツリーを 1 レベル上に移動して、すべてのサブ要素を含む article div に移動し、その div 内で .entry-content-thumbnail を見つけて拡張します。
問題は、div が、slideToggle open を実行している div の上で slideUp を実行すると、記事の上部が表示されなくなり、読み心地が良くないことです。ウィンドウをスクロールして、クリックした .entry-title-thumbnail-active に戻そうとしています。
これを jsFiddle に入れました: http://jsfiddle.net/JGuilford/VzVCD/
どんな助けでも大歓迎です！