Menu

アコーディオンプラグイン - ulバージョン

入れ子になった ul要素でのアコーディオンです。Webサイトのサイドバーなどでよく利用される UIです。

オプション
  • speed : アニメーションのスピード
  • easing : Easing のエフェクト
  • activeClass : アクティブな li要素に付けるクラス
  • iconClass : アイコンとなる span要素に付けるクラス

最初から開いておきたいサブメニュー（ul要素）の親となる li要素に、アクティブなクラスを付けておきます。

jQuery Code

<script src="../js/jquery.easing.1.3.js"></script>
			
...省略 ...
			
(function($){
	$.fn.jqueryUlAccordion = function(options){
			
		/* オプションの設定 */
		options = $.extend({
			
			/* アニメーションのスピード */
			speed: "fast",
			
			/* Easing のエフェクト */
			easing: "jswing",
			
			/* アクティブな li要素に付けるクラス */
			activeClass: "active",
			
			/* アイコンとなる span要素に付けるクラス */
			iconClass: "icon"
			
		}, options);
			
		this.each(function(){
			
			/* アクティブなli直下のul以外のulを非表示 */
			$('ul:not(".' + options.activeClass + ' > ul")', this).hide();
			
			/* ul（サブメニュー）を内包しているli直下のa */
			$("li:has(ul) > a", this)
			
				/* アイコン用のspanを挿入 */
				.prepend('<span class="' + options.iconClass + '"></span>')
			
				.click(function(){
			
					/* aの親であるliがアクティブなら処理なし */
					if( $(this).parent("li").attr("class") == options.activeClass ){
						return false;
					}
			
					/* 祖先のulを全て取得し、:firstで最初のul（つまり直近のul）を変数に */
					var parentUl = $(this).parents("ul:first");
			
					/* liからアクティブなクラスを削除 */
					parentUl.find("li").removeClass( options.activeClass );
			
					/* クリックされたaの親となるliにアクティブクラスを付ける */
					$(this).parent("li").addClass( options.activeClass );
			
					/* サブメニューが非表示なら */
					if( $("+ ul", this).css("display") == "none" ){
			
						/* 同じ階層のulを閉じる（Easingあり） */
						parentUl.find("ul").slideUp(options.speed, options.easing);
			
						/* クリックされたaのサブメニューを開く（Easingあり）*/
						$("+ ul", this).slideDown(options.speed, options.easing);
					}
			
					return false;
				});
		});
		return this;
	}
})(jQuery);
			
			
jQuery(function($) {
	$("#accordion").jqueryUlAccordion({
			
		/* アニメーションのスピードを500に設定 */
		speed: 500,
			
		/* EasingのエフェクトをeaseInOutBackに */
		easing: "easeInOutBack"
	});
});

Chapter 15