cherenkov/人力検索はてな解答サンプル20101113

## 人力検索はてな解答サンプル20101113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jqueryで開閉メニューをcookieを使用して制御する | sample | caraldo.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://blog.caraldo.net/styles-site.css" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<script type="text/javascript" src="http://blog.caraldo.net/sample/js/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	/*
	//初期設定
	$("dd").each(function (i){//※1
		if ($.cookie("cookName")) {
			if (($.cookie("cookName").indexOf(i)) != -1) {//※2
				$("dd").eq(i).show();
			} else {
				$("dd").eq(i).hide();
			}
		}else{
			$("dd").hide();//cookieが無い場合は全て隠す
		}
		i = i+1;
	});
	*/

	//初期設定
	$("dd").each(function (i){
		if ($.cookie("cookName")) {
			if (($.cookie("cookName").indexOf(i)) != -1) {//※2
				// ****ミソ****
				$(this).show().prev('dt').addClass('open');
			} else {
				$(this).hide();
			}
		}else{
			$(this).hide();//cookieが無い場合は全て隠す
		}
	});


	//クリック時のfunction設定
	$("dt").click(function(){
	    // ****ミソ****
	    $(this).toggleClass('open');

		//何番目のdtなのかを変数に代入
		var index = $("dt").index(this);
		var name = "cookName" ;//cookieの名前
		var cookVal = $.cookie(name);//cookieの値を変数に代入

		//クリックされたら対応するddにイベントを割り当てる
		$("dd").eq(index).slideToggle("fast");

		//cookieに追加
		if ($.cookie(name)) {//既に対応するcookieを持っていたら
			if ((cookVal.indexOf(index)) != -1) {//valueに対応する値をもっている場合
				if (($.cookie(name).length) == 1) {
				//この場合は対応するindex番号では無く、cookie自体を削除
					$.cookie(name,null);
					//alert("クッキーを削除しました");
					//alert("現在のcookieの値は" + $.cookie(name) + "です");
				}else{
					var cookVal = $.cookie(name).replace(index,"");//※3
					$.cookie(name,cookVal,{expires:7});//↑で定義しなおした値でcookieを再セット
					//alert("クッキーからindex番号[" + index + "]を削除しました");
					//alert("現在のcookieの値は" + $.cookie(name) + "です");
				}
			}else{
				$.cookie(name,cookVal+index,{expires:7});//cookieをセットする
				//alert("クッキーにindex番号[" + index + "]を追加しました");
				//alert("現在のcookieの値は" + $.cookie(name) + "です");
			}
		}else{
			 $.cookie(name,index,{expires:7});//cookieを新たにセットする
			 //alert("新たにクッキーをセットしました");
			 //alert("現在のcookieの値は" + $.cookie(name) + "です");
		}

	}).css("cursor","pointer");
});
</script>
<style type="text/css">
*{
	margin:0;
	padding:0;
}

dl {
	width:500px;
	margin:20px;
}

dt {
	padding:8px;
	background-color:#66CCFF;
	border:1px solid #0066FF;
}

dd {
line-height:1.4;
padding:10px;
}
</style>

</head>
<body id="sample_body">
<div id="sample_container">
	<h2>jqueryで開閉メニューをcookieを使用して制御する</h2>
	<dl>
		<dt>ここをクリックしてください</dt>
		<dd>jQueryを使った開閉メニューです。</dd>
		<dt>cookieで開閉を保持します</dt>

		<dd>現在開いているものは開いたまま、閉じているものは閉じている状態で保持されます。</dd>
		<dt>リロードしてみてください</dt>
		<dd>右のボタンを押すとリロードします。<input type="submit" onclick="location.reload()" value="リロードします" /></dd>
	</dl>
</div>
<!-- Google　Analytics -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1160640-2";
urchinTracker();

</script>
<!-- Google　Analytics -->
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>
	<head>
	<title>jqueryで開閉メニューをcookieを使用して制御する \| sample \| caraldo.net</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="http://blog.caraldo.net/styles-site.css" type="text/css" />
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.2.6");</script>
	<script type="text/javascript" src="http://blog.caraldo.net/sample/js/jquery.cookie.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	/*
	//初期設定
	$("dd").each(function (i){//※1
	if ($.cookie("cookName")) {
	if (($.cookie("cookName").indexOf(i)) != -1) {//※2
	$("dd").eq(i).show();
	} else {
	$("dd").eq(i).hide();
	}
	}else{
	$("dd").hide();//cookieが無い場合は全て隠す
	}
	i = i+1;
	});
	*/

	//初期設定
	$("dd").each(function (i){
	if ($.cookie("cookName")) {
	if (($.cookie("cookName").indexOf(i)) != -1) {//※2
	// **ミソ**
	$(this).show().prev('dt').addClass('open');
	} else {
	$(this).hide();
	}
	}else{
	$(this).hide();//cookieが無い場合は全て隠す
	}
	});


	//クリック時のfunction設定
	$("dt").click(function(){
	// **ミソ**
	$(this).toggleClass('open');

	//何番目のdtなのかを変数に代入
	var index = $("dt").index(this);
	var name = "cookName" ;//cookieの名前
	var cookVal = $.cookie(name);//cookieの値を変数に代入

	//クリックされたら対応するddにイベントを割り当てる
	$("dd").eq(index).slideToggle("fast");

	//cookieに追加
	if ($.cookie(name)) {//既に対応するcookieを持っていたら
	if ((cookVal.indexOf(index)) != -1) {//valueに対応する値をもっている場合
	if (($.cookie(name).length) == 1) {
	//この場合は対応するindex番号では無く、cookie自体を削除
	$.cookie(name,null);
	//alert("クッキーを削除しました");
	//alert("現在のcookieの値は" + $.cookie(name) + "です");
	}else{
	var cookVal = $.cookie(name).replace(index,"");//※3
	$.cookie(name,cookVal,{expires:7});//↑で定義しなおした値でcookieを再セット
	//alert("クッキーからindex番号[" + index + "]を削除しました");
	//alert("現在のcookieの値は" + $.cookie(name) + "です");
	}
	}else{
	$.cookie(name,cookVal+index,{expires:7});//cookieをセットする
	//alert("クッキーにindex番号[" + index + "]を追加しました");
	//alert("現在のcookieの値は" + $.cookie(name) + "です");
	}
	}else{
	$.cookie(name,index,{expires:7});//cookieを新たにセットする
	//alert("新たにクッキーをセットしました");
	//alert("現在のcookieの値は" + $.cookie(name) + "です");
	}

	}).css("cursor","pointer");
	});
	</script>
	<style type="text/css">
	*{
	margin:0;
	padding:0;
	}

	dl {
	width:500px;
	margin:20px;
	}

	dt {
	padding:8px;
	background-color:#66CCFF;
	border:1px solid #0066FF;
	}

	dd {
	line-height:1.4;
	padding:10px;
	}
	</style>

	</head>
	<body id="sample_body">
	<div id="sample_container">
	<h2>jqueryで開閉メニューをcookieを使用して制御する</h2>
	<dl>
	<dt>ここをクリックしてください</dt>
	<dd>jQueryを使った開閉メニューです。</dd>
	<dt>cookieで開閉を保持します</dt>

	<dd>現在開いているものは開いたまま、閉じているものは閉じている状態で保持されます。</dd>
	<dt>リロードしてみてください</dt>
	<dd>右のボタンを押すとリロードします。<input type="submit" onclick="location.reload()" value="リロードします" /></dd>
	</dl>
	</div>
	<!-- Google　Analytics -->
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
	</script>
	<script type="text/javascript">
	_uacct = "UA-1160640-2";
	urchinTracker();

	</script>
	<!-- Google　Analytics -->
	</body>
	</html>