<html> <head> <script language="JavaScript"> frm1 = new Array(10); ← 各項目の表示・非表示のフラグ (1:表示 / −1:非表示) for (i=0;i<10;i++) { frm1[i]=(-1); } // クリックした項目のみの切り替え function OpCl1(num) { imgnum="img" + num; if (frm1[num]<0) { ← クリックした項目が非表示なら document.forms[num].style.display="block"; ← 表示 document.images[imgnum].src="../../image/minus.jpg"; ← に } else { document.forms[num].style.display="none"; ← 非表示 document.images[imgnum].src="../../image/plus.jpg"; ← に } frm1[num] *= (-1); ← 表示・非表示のフラグを反転 return 0; } </script> </head> <body> クリックした項目だけが表示・非表示を繰り返し、それ以外の項目は変化しない <div onclick="OpCl1(0);" ><img name="img0" src="../../image/plus.jpg" align="top"> 項目1</div> ← マウスイベントの感知(自分が何番目のフォームかを引数として渡す) <form style="display:none;"> form[0] <ol> <li>小項目1−1 <li>小項目1−2 <li>小項目1−3 <li>小項目1−4 </ol> </form> <div onclick="OpCl1(1);"><img name="img1" src="../../image/plus.jpg" align="top"> 項目2</div> <form style="display:none;"> form[1] <ol> <li>小項目2−1 <li>小項目2−2 <li>小項目2−3 <li>小項目2−4 </ol> </form> <div onclick="OpCl1(2);"><img name="img2" src="../../image/plus.jpg" align="top"> 項目3</div> <form style="display:none;"> form[2] <ol> <li>小項目3−1<br> <li>小項目3−2<br> <li>小項目3−3<br> <li>小項目3−4<br> </ol> </form> <div onclick="OpCl1(3);"><img name="img3" src="../../image/plus.jpg" align="top"> 項目4</div> <form style="display:none;"> form[3] <ol> <li>小項目4−1<br> <li>小項目4−2<br> <li>小項目4−3<br> <li>小項目4−4<br> </ol> </form> </body> </html>
<html> <head> <script language="JavaScript"> frm2 = new Array(10); ← 各項目の表示・非表示のフラグ (1:表示 / −1:非表示) for (i=0;i<10;i++) { frm2[i]=(-1); } // クリックした項目以外はすべて閉じる function OpCl2(num) { imgnum="img" + num; if (frm2[num]<0) { ← クリックした項目が非表示なら document.forms[num].style.display="block"; ← 表示 document.images[imgnum].src="../../image/minus.jpg"; ← に frm2[num] = (1); ← 表示・非表示のフラグを表示に for (j=5;j<10;j++) { imgj="img" + j; if (j != num) { ← クリックした項目以外は document.forms[j].style.display="none"; ← 非表示 document.images[imgj].src="../../image/plus.jpg"; ← に frm2[j]=(-1); ← 表示・非表示のフラグを非表示に } } } else { ← クリックした項目が表示なら document.forms[num].style.display="none"; ← 非表示 document.images[imgnum].src="../../image/plus.jpg"; ← に frm2[num] = (-1); ← 表示・非表示のフラグを表示に } return 0; } </script> </head> <body> クリックした項目だけが表示・非表示を繰り返し、それ以外の項目は変化しない <div onclick="OpCl2(5);" ><img name="img5" src="../../image/plus.jpg" align="top"> 項目1</div> ← マウスイベントの感知(自分が何番目のフォームかを引数として渡す) <form style="display:none;"> form[5] <ol> <li>小項目1−1 <li>小項目1−2 <li>小項目1−3 <li>小項目1−4 </ol> </form> <div onclick="OpCl2(6);"><img name="img6" src="../../image/plus.jpg" align="top"> 項目2</div> <form style="display:none;"> form[6] <ol> <li>小項目2−1 <li>小項目2−2 <li>小項目2−3 <li>小項目2−4 </ol> </form> <div onclick="OpCl2(7);"><img name="img7" src="../../image/plus.jpg" align="top"> 項目3</div> <form style="display:none;"> form[7] <ol> <li>小項目3−1<br> <li>小項目3−2<br> <li>小項目3−3<br> <li>小項目3−4<br> </ol> </form> <div onclick="OpCl2(8);"><img name="img8" src="../../image/plus.jpg" align="top"> 項目4</div> <form style="display:none;"> form[8] <ol> <li>小項目4−1<br> <li>小項目4−2<br> <li>小項目4−3<br> <li>小項目4−4<br> </ol> </form> </body> </html>