POPSブログ

jQuery 自動開閉アコーディオン 使用不能不良品

200

  Category:  jquery2013/02/10 pops 

jQuery slideToggle()で作った、自動開閉アコーディオンですが、諸般、家庭の事情により「使用不能」です。尚、この記事は「祝、200ページ達成記念」ページです。

 

【FBI警告】ハーイ、ご町内の皆様には、多大なご迷惑とお騒がせをしております。このサンプルは「使用不能」ですので、お手数でも、前ページの「jQuery setTimeout自動開閉アコーディオン」を参照ください。


家庭の事情の無い、前ページ、jQuery setTimeout自動開閉アコーディオンの記事です。

【参照】当方の記事: jQuery setTimeout自動開閉アコーディオン


Dame


ACCORDION-NEWS-2、slideToggle()形式、不良品

セッカチな人は、MENUブロックを「クリック」しても開くことが出来ます。(タイマーは再セットされます)

家庭の事情により「全てぐらつき隙が出る一家離散の惨劇だ」修正不能ダゼ!、お医者さんに相談ダ!。





HTML JS CSS


HTML

HTML、「dl dt」構成です。「MENUブロック」増減可能、但し全体の高さを再計算して、CSS修正。


<div id="slide-news-box2">
	<div class="slide-news-head2"><h2>MENUお題目</h2></div>
	<div id="slide-news-block2">
		<h3>MENUブロック1</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
		<h3>MENUブロック2</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
		<h3>MENUブロック3</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
		<h3>MENUブロック4</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
		<h3>MENUブロック5</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		</dl>
	</div>
</div>


JS

huryou-hin.js、イイカゲンな名前で保存。


//huryou-hin.js
//禁煙、交通安全火の用心、天地無用

(function($){

	//slideToggle形式
	$(function(){

		var slide_speed=400;//200-800
		var time=5000;// 5000-10000
		var no=0;//オープン指定番号 0-

		//----------------------------------

		var timerID=null;
		var index_no=0;
		var len=0;

		//オブジェクト保存
		var newsBox=$('#slide-news-block2');
		//オープン指定番号要素保存
		var openItem=$('#slide-news-block2').find('h3').next('dl').eq(no);
		len=newsBox.find('h3').length;

		//一旦消す
		newsBox.find('dl').hide();

		//active要素を指定して開く
		openItem.show().prev('h3').addClass('active');
		//timer-SET
		index_no=no;
		timerID=setTimeout(next_set,time);

		//ACTION
		newsBox.find('h3').click(function() {

			//開いている場合は実行しない/くずれる
			if ($(this).hasClass('active')) {return false}

			clearTimeout(timerID);
			index_no=newsBox.find('h3').index(this);
			var item=$(this);
			move(index_no);
		});
		
		//slideToggle
		function move(opno) {

			var opnumber=opno;
			var hitItem=newsBox.find('h3').eq(opnumber);

			openItem=hitItem.next('dl');
			var siblingsItem=openItem.siblings('dl:visible');

			openItem.slideToggle(slide_speed);
			siblingsItem.slideUp(slide_speed,function () {
				siblingsItem.siblings('h3').removeClass('active');
				hitItem.addClass('active');
				timerID=setTimeout(next_set,time);
			});

		}

		//next
		function next_set() {
			index_no +=1;
			if (index_no > (len-1)) {index_no=0;}
			move(index_no);
		}
	});

})(jQuery);


CSS

huryou-hin.css、イイカゲンな名前で保存。


/* huryou-hin.css 日本語 */

/*-----外部部構造2-----*/
#slide-news-box2 {
	position:relative;
	width:200px;
	height:290px;
	margin:0;
	padding:0;
	text-align:left;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background-color:#FF1493;
}
#slide-news-box2 .slide-news-head2 {
	display:block;
	width:200px;
	height:30px;
}
#slide-news-box2 .slide-news-head2 h2{
	width:auto;
	height:30px;
	margin:0;
	padding:0 10px;
	font-size:13px;
	color:#000000;
	line-height:30px;
}


/*-----内部構造2-----*/
#slide-news-block2 {
	position:relative;
	left:0;top:0;
	display:block;
	width:200px;
	height:250px;
	background-color:#FFFFFF;
	overflow:hidden;
}
#slide-news-block2 h3 {
	width:auto;
	height:19px;
	margin:0;
	padding:0 0 0 10px;
	border-top:1px #FFFFFF solid;
	line-height:20px;
	color:#FFFFFF;
	font-size:12px;
	background:url(/main/images/arrow_5.gif) no-repeat;
	background-color:#BBBBBB;
	background-position:right 0px;
	cursor:default;/*pointer*/
}

/*-----OPEN指定-----*/
#slide-news-block2 h3.active {
	background-position:right -21px;
	background-color:#555555;
}

/*-----擬似:hover-----*/
#slide-news-block2 h3:hover {
	background-color:#AAAAAA;
}

/*-------- DL DT -------------*/
#slide-news-block2 dl {
	display:block;
	width:auto;
	height:150px;
	margin:0;
	padding:0;
}
#slide-news-block2 dl dt {
	list-style:none;
	height:auto;
	margin:1px 5px;
	padding:0;
	text-align:left;
	font-size:12px;
	font-weight:normal;
	line-height:150%;
	border-bottom:1px #CCCCCC solid;
}
#slide-news-block2 dl dt a {
	text-decoration:none;
	color:#BBBBBB;	
}
#slide-news-block2 dl dt a:hover {
	background-color:#EFEFEF;
	color:#000000;
}
#slide-news-block2 dl dt a:active {
	color:#555555;
}


超簡単、投げやりな説明


「DL階層」を、slideToggle()で動かすように無理やり「平手打ち」で作った為に「不良品」です。前ページのJS推奨。


●「DL」の高さは必ず設定します。設定なき場合は動作しません。内枠(#slide-news-block2)は単独動作可能。外枠など(#slide-news-box2、.slide-news-head2)は装飾のラップです。


● 内枠高さ計算 (#slide-news-block2)
内枠高さ = 内部スライド要素の数 x タイトルの高さ + DLの高さ
サンプル例: 20 x 5 + 150 = 250


● 内部の要素にY方向の padding margin などがあると、家庭の事情はひどくなる。




只今、前ページ、にて良品との「お取替え交換セール」を行っています。

【赤札セール案内】当方の記事: jQuery setTimeout自動開閉アコーディオン


「血迷った神の天罰」により、悲惨な「200ページ達成記念」ページになって仕舞いました。
以上、記念イベントでした。

 


[ この記事のURL ]


タグ:jquery , Accordion , memo

 

ブログ記事一覧



[1]