締切済み

収納メニューについて教えてください。

2008/07/12 15:14

以下のような階層構造で収納メニューを作りたいのですが記述の仕方がわかりません。　A 　┣A-1 　　┣A-1-1 　　┣A-1-2 　┣A-2 　　┣A-2-1 　　┣A-2-2 　┗A-3 　　┣A-3-1 　 ┣A-3-2 最初はAのみが表示されていて、AをクリックするとA-1、A-2、A-3、と表示される。 A-1をクリックするとA-1-1、A-1-2が表示されるようにしたいのです。実際にハイパーリンクが繋がっているのはA-1-1、A-1-2の最下層の項目だけです。以下の記述を参考にhtmlをくんでいたのですが、二重の階層構造にする方法がわかりませんでした。わかる方、どうか教えてください。 <head> <script type="text/javascript">  </script> </head> <body> <span class="list" onclick="expand(a);" style="cursor:hand;">A</span><div id="a" style="display:none"> ┣<a href="tagu.html" target=_blank><FONT size="2">A-11</FONT></a><br> 　　┣<a href="tagu.html" target=_blank><FONT size="2">A-2</FONT></a><br> 　　┗<a href="tagu.html" target=_blank><FONT size="2">A-3</FONT></a> </div> </body>

sangai
お礼率0% (0/1)

HTML
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

みんなの回答

yambejp
ベストアンサー率51% (3827/7415)

2008/07/12 15:59 回答No.1

まずはメニュー構造を理解することです。メニューはul、liで組むのがよいとされます。 ulタグの直下にはliしか置けませんので、ちょっと複雑ですが以下のようにするとすっきりするでしょう。 javascriptが有効とは限りませんので、メニューは基本は表示状態とし、 javascriptで非表示に換える・・・という以下のような流れがよいかもしれません。 //hoge.htm <link rel="stylesheet" type="text/css" href="hoge.css"> <script type="text/javascript" src="hoge.js"></script> <ul id="menu"> <li> <div>A</div> <ul> <li> <div>┣A-1</div> <ul> <li>┃┣<a href="#" target="_blank">A-1-1</a></li> <li>┃┗<a href="#" target="_blank">A-1-2</a></li> </ul> </li> <li> <div>┣A-2</div> <ul> <li>┃┣<a href="#" target="_blank">A-2-1</a></li> <li>┃┗<a href="#" target="_blank">A-2-2</a></li> </ul> </li> <li> <div>┗A-3</div> <ul> <li><span class="indent">■</span>┣<a href="#" target="_blank">A-3-1</a></li> <li><span class="indent">■</span>┗<a href="#" target="_blank">A-3-2</a></li> </ul> </li> </ul> </li> </ul> //hoge.css ul#menu, ul#menu ul { margin:0px; padding:0px; list-style:none; } ul#menu span.indent { visibility:hidden; } ul#menu ul.hide{ display:none; } //hoge.js window.onload=function(){ setmenu(); } function setmenu(){ var menu=document.getElementById("menu"); setul(menu); setdiv(menu); } function setdiv(menu){ var tags=menu.getElementsByTagName("div"); for(var i=0;i<tags.length;i++){ tags[i].onclick=function(){ var node=this.nextSibling; while(node){ if(node.nodeName=="UL"){ node.className=node.className==""?"hide":""; } node=node.nextSibling; } } } } function setul(menu){ var tags=menu.getElementsByTagName("ul"); for(var i=0;i<tags.length;i++){ obj=tags[i]; obj.className="hide"; } }