締切済み

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

  • 困ってます
  • 質問No.4170813
  • 閲覧数204
  • ありがとう数0
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 0% (0/1)

以下のような階層構造で収納メニューを作りたいのですが記述の仕方がわかりません。
 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">
<!--
function expand(id) {
if (id.style.display == "none") {
id.style.display = "";}
else {id.style.display = "none";}
window.event.cancelBubble = true;}
// -->
</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>

回答 (全1件)

  • 回答No.1

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

まずはメニュー構造を理解することです。

メニューは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";
}
}
Be MORE 7・12 OK-チップでイイコトはじまる
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ