Link Place Plugin

ケース3『戻り値を利用して上位オブジェクトを操作する』

記述したjavascript

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Js/jquery.IW3_Link_PlaceCss.js"></script>
<script type="text/javascript">
		$(function($){
			//スライドクローズ(cssで設定しても可)
			$('.menu_unit').hide();
			//戻り値は、配列で返ります。
			var A = $( document.links ).IW3_Link_PlaceCss( { rCLASS : 'mark', aCLASS : 'mark2' } );
			for (var i = 0, MAX = A.length; i < MAX; i++ ){
				$( A[i] ).parent().slideDown('slow');
			};
			//クリックでスライドオープン
			$('.menu_trigger').click(
				function(){ $(this).next('.menu_unit').slideToggle('slow')}
			);
		});
</script>

記述したcss

<style type="text/css">
	#case3{
		width: 580px;
		margin: 0px;
		padding: 0px;
		border-top-width: 1px;
		border-right-width: 1px;
		border-left-width: 1px;
		border-top-style: solid;
		border-right-style: solid;
		border-left-style: solid;
		border-top-color: #666;
		border-right-color: #666;
		border-left-color: #666;
	}
	.mark{
		font-weight: bold;
		font-size: 16px;
		line-height: 30px;
		display: block;
		margin: 0px;
		background-color: #CCC;
		background-image: url(img/M1.gif);
		background-repeat: no-repeat;
		background-position: 5px center;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 30px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #666;
	}
	.mark2{
		font-weight: bold;
		font-size: 16px;
		line-height: 30px;
		display: block;
		margin: 0px;
		background-color: #EDEDED;
		background-image: url(img/M2.gif);
		background-repeat: no-repeat;
		background-position: 5px center;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 30px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #666;
	}
	#case3 h4.menu_trigger{
		margin: 0px;
		padding: 10px;
		display: block;
		cursor: pointer;
		color: #FFF;
		background-color: #333;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #CCC;
	}
</style>

記述したHTMLのLinkソース

<div id="case3">
	<h4 class="menu_trigger">▽リンクメニュー1</h4>
	<div class="menu_unit">
		<a href="index.html" class="mark">解説ページに戻る---index.html</a>
		<a href="dami1.html" class="mark">ケース1『該当オブジェクトにcssクラスを追加』</a>
		<a href="dami2.html" class="mark">ケース2『該当オブジェクトのcssクラスを別のcssクラスに置き換える』</a>
		<a href="dami3.html" class="mark">ケース3『戻り値を利用して上位オブジェクトを操作する』</a>
	</div>
	<h4 class="menu_trigger">▽リンクメニュー2</h4>
	<div class="menu_unit">
		<a href="javascript:void(0);" class="mark">ダミー4</a>
		<a href="javascript:void(0);" class="mark">ダミー5</a>
		<a href="javascript:void(0);" class="mark">ダミー6</a>
		<a href="javascript:void(0);" class="mark">ダミー7</a>
	</div>
	<h4 class="menu_trigger">▽リンクメニュー3</h4>
	<div class="menu_unit">
		<a href="javascript:void(0);" class="mark">ダミー8</a>
		<a href="javascript:void(0);" class="mark">ダミー9</a>
		<a href="javascript:void(0);" class="mark">ダミー10</a>
	</div>
</div>