【jQuery】スマートフォン用の2階層アコーディオンのサンプルコード

いまさらながら、2階層アコーディオンを自作したのでメモ。
スマートフォン用なのでクリックした項目をトップにスクロールさせる機能も搭載しました。

⇒デモ

jqueryアコーディオン
【JS】

// タイトル
var list_title = "ul#accordionBlock h3.mainTrigger";
// サブリスト
var list_sub = "ul#accordionBlock li dl.subList";
// サブタイトル
var list_subtitle = "ul#accordionBlock li dl.subList dt";
// コンテンツ
var list_contents = "ul#accordionBlock li dl.subList dd";

$(function(){
	$(list_sub).hide().children("dd").hide();
	
	// 1階層目処理
	$(list_title).click(function () {
		funcClickEvent($(this), list_sub, list_title);					  
	});
	
	// 2階層目処理
	$(list_subtitle).click(function () {
		funcClickEvent($(this), list_contents, list_subtitle);					  
	});
	
    // funcScrollTop(現在地, 開閉要素, タイトル)
    function funcClickEvent(aaa, bbb, ccc){
		$(aaa).children("h4").toggleClass("opened");
		$(ccc).children("h4").not($(aaa).children("h4")).removeClass("opened");
		$(aaa).next(bbb).toggle();
		$(bbb).not(aaa.next(bbb)).hide();
		funcScrollTop(aaa, ccc);
    }

    // funcScrollTop(ボタン, リスト名)
    function funcScrollTop(aaa, bbb){
		var i = $(bbb).index(aaa)
		var p = $(bbb).eq(i).offset().top;			 
		$("html, body").animate({ scrollTop: p }, 'fast');
		return false;
    }
});

【HTML】

<ul id="accordionBlock">
	<li>
		<h3 class="mainTrigger mainTrigger01">大見出し1</h3>
		<dl class="subList">
		
			<dt class="SubTrigger subTrigger01"><h4 class="subTriggerIcon">中見出し</h4></dt>
				<dd>
					<h5 class="icon01">小見出し</h5>
					<p>テキスト</p>
				</dd>
	
			<dt class="SubTrigger subTrigger01"><h4 class="subTriggerIcon">中見出し</h4></dt>
				<dd>
					<h5 class="icon01">小見出し</h5>
					<p>テキスト</p>
				</dd>
			
			<dt class="SubTrigger subTrigger01"><h4 class="subTriggerIcon">中見出し</h4></dt>
				<dd>
					<h5 class="icon01">小見出し</h5>
					<p>テキスト</p>
				</dd>
		</dl>
	</li>
</ul>

⇒デモ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>