QHMの新タイプHAIKの活用と実験、オープンソースの活用

[ JQuery ]

• 2013-11-12 <script src="./jquery/js/jquery-1.9.1.js"></script> <script src="./jquery/js/jquery-ui-1.10.3.custom.js"></script> <script type="text/javascript"> $(function () { $(".textArea").slideUp(); $("#ca1").click(function (){ $("#ta1").slideToggle(); }); $("#ca2").click(function (){ $("#ta2").slideToggle(); }); $("#ca3").click(function (){ $("#ta3").slideToggle(); }); }); </script> <style type="text/css"> <!-- .clickArea{ width:250px; padding:5px; color:#fff; background-color:#09C; } .textArea{ width:250px; padding:5px; color:#666; background-color:#ddd; } --> </style> <div class="clickArea" id="ca1">click me. メニュー1</div> <div class="textArea" id="ta1"> <ul> <li>メニュー1-0</li> <li>メニュー1-1</li> <li>メニュー1-2</li> <li>メニュー1-3</li> <li>メニュー1-4</li> <li>メニュー1-5</li> <li>メニュー1-6</li> <li>メニュー1-7</li> <li>メニュー1-8</li> <li>メニュー1-9</li> <li><a href="http://www.eigyou.com/deto/">出戸調剤薬局</a></li> <li><a href="http://dbweb.0258.net/">dbweb.0258.net</a></li> </ul> </div> <br> <div class="clickArea" id="ca2">click me. メニュー2</div> <div class="textArea" id="ta2"> <ul> <li>メニュー2-0</li> <li>メニュー2-1</li> <li>メニュー2-2</li> <li>メニュー2-3</li> <li>メニュー2-4</li> <li>メニュー2-5</li> <li>メニュー2-6</li> <li>メニュー2-7</li> <li>メニュー2-8</li> <li>メニュー2-9</li> </ul> </div> <br> <div class="clickArea" id="ca3">click me. メニュー3</div> <div class="textArea" id="ta3"> <ul> <li>メニュー3-0</li> <li>メニュー3-1</li> <li>メニュー3-2</li> <li>メニュー3-3</li> <li>メニュー3-4</li> <li>メニュー3-5</li> <li>メニュー3-6</li> <li>メニュー3-7</li> <li>メニュー3-8</li> <li>メニュー3-9</li> </ul> </div>

3つはいいですが、5個とか10個設置した時に、同じような記述を毎回しなければならないのは、間違いの元です。

		$("#ca1").click(function (){
			$("#ta1").slideToggle();
		});

せめてここは、数字の部分が違うだけなので、
もっとシンプルに記述出来ないか色々とやってみます。

スクリプトの記述を工夫する→開閉メニュー04