アコーディオンメニューを開いた時に、アコーディオンメニューの先頭へスクロールして移動します。閉じた時はスクロールしません。
タイトル1
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
タイトル2
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
タイトル3
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
html、CSSのコードは下記の記事と同様です。
開くボタン・閉じるボタンを1つの画像で使いまわす仕様です。
最後にjQueryのコードです。
まず、クリックしたタイトルのpタグにdataを利用してdata-clicks属性を付与します。なお、Developer Toolsで見てもソース上カスタムデータ属性は反映されません。そして、この時点ではdata-clicks属性に値を設定していないため、console logで見ると変数clicksの値はundefinedです。
次にタイトルのpタグにクラス名selectedを付与し、クラス名toggle_txtのpタグをslideToggleします。この動作は上記の記事と同様です。
次にifで変数clicksの中身を調べますが、undefinedのためelseの処理になります。クリックしたタイトルのpタグのY座標を調べスクロールで移動します。
最後にdata-clicks属性に「!clicks」の値を設定します。つまりundefinedではない値、trueを設定します。
再度タイトルをクリックしてアコーディオンメニューを閉じる時の動作時は、変数clicksにtrueが設定されているためスクロールの動作が発生しません。今度は変数clicksにfalseを代入し、アコーディオンメニューが開く時の動作に備えます。
$(function(){
$('.toggle_title').click(function(){
var clicks = $(this).data('clicks');
$(this).toggleClass('selected');
$(this).next().slideToggle();
if (clicks) {
} else {
var top = $(this).offset().top;
$('html,body').animate({scrollTop:top},500);
}
$(this).data("clicks", !clicks);
});
});