３階層メニューについての質問です。

解決済

質問者：riku257
質問日時：2008/02/16 01:26
回答数：5件

元の文字
　→あ
　　→Ａ
　　→Ｂ
　→い
　　→Ｃ
　　→Ｄ
「元の文字」をクリックすると「あ」「い」が同時に出現。
「あ」をクリックすると「Ａ」「Ｂ」が出現。
となるようにしたいのですが、

<HEAD>～</HEAD>内↓
<SCRIPT language="JavaScript">

</SCRIPT>

<BODY>～</BODY>内↓
<A href="javaScript:treeMenu('treeMenu1')">元の文字</A><br>
<DIV id="treeMenu1" style="display:none">
<br>
<A style="color :white;" href="javaScript:treeMenu('treeMenu2')">
　　あ</A><br>
<DIV id="treeMenu2" style="display:none">
　　<A style="color : red;" href="＊＊＊(←URL省略)">Ａ</A><BR>
　　<A style="color : red;" href="＊＊＊">Ｂ</A><BR>
<br>
<A style="color : white;" href="javaScript:treeMenu('treeMenu3')">
　　い</A><br>
<DIV id="treeMenu3" style="display:none">
　　<A style="color : red;" href="＊＊＊">Ｃ</A><BR>
　　<A style="color : red;" href="＊＊＊">Ｄ</A><BR>
</DIV>
</DIV>
</DIV>

とすると、
「元の文字」をクリックすると「あ」が出現。
「あ」をクリックすると「Ａ」「Ｂ」「い」が出現となります。

上記タグを少し変更して「あ」「い」を
同時に出現させる方法を教えて頂きたいです。
treeMenu○部分の変更で、出来るかと思ったのですが、
上手くいきませんでした。

宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： leap_day
回答日時：2008/02/16 06:20

こんにちは

<div id="treeMenu2">でＤまで同じブロックでしているので全部出てしまいますので#1様のように<div>を分割してください

あと気になる点が3点ほどあったので余計なお世話かと思いますが追記します

1点目はdocument.allだとdocument.allが効くIEやOperaなどでは階層メニューになるのですが効かないFirefoxなどでは階層メニューにはなりません（＞＜）
汎用的にするには
document.getElementById(tName)
のようになります

2点目は<br>なんですが<div>はブロック要素なのでそれ自体で改行を含んでいます
Ａ～Ｂ、Ｃ～Ｄ間の<br>以外はいらないような気がします
開いたときに、元の文字～あ、Ｂ～い間に1行スペースを空けるようにしているのであれば無視してください

3点目は対象のものだけblock,noneしているのでtreeMenu2やtreeMenu3を開いた状態でtreeMenu1を閉じるともう一度開いたときにtreeMenu2やtreeMenu3が開いた状態で開かれると思うんです
trreMenu1を開くときだけ他のを閉じてから開くようにした方が良いのでは？と思います

function treeMenu(tName) {
if(tName == "treeMenu1") {
obj = document.getElementById(tName).getElementsByTagName("div");
for(i=0;i<obj.length;i++) {
obj[i].style.display = "none";
}
}

tMenu = document.getElementById(tName).style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
※一例ですので別のやり方で閉じてもいいです

- 0
- 件

通報する

この回答へのお礼

お礼が遅くなってしまい、すみません。

質問以外の不備もご指摘頂き、
ありがとうございました。
私自身気づいていないところもあったので、
大変、助かりました。ありがとうございました。

通報する

お礼日時：2008/02/18 02:14

No.5

回答者： yambejp
回答日時：2008/02/17 04:00

おお、そうか構造上は#4さんのやり方がきれいですね。

でわ

#sample2.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample2.css" />
<script type="text/javascript" src="sample2.js"></script>
</head>
<body>
<div class="menu">
<div>元の文字</div>
<ul>
<li>
<div>あ</div>
<ul>
<li>
<div>Ａ</div>
<ul>
<li>
<div>１</div>
<ul>
<li>
<div>Ｘ</div>
</li>
<li>
<div>Ｙ</div>
</li>
<li>
<div>Ｚ</div>
</li>
</ul>
</li>
<li>
<div>２</div>
</li>
<li>
<div>３</div>
<ul>
<li>
<div>Ｘ</div>
</li>
<li>
<div>Ｙ</div>
</li>
<li>
<div>Ｚ</div>
</li>
</ul>
</li>
</ul>
<li>
<div>Ｂ</div>
</li>
</ul>
</li>
<li>
<div>い</div>
<ul>
<li>
<div>Ｃ</div>
</li>
<li>
<div>Ｄ</div>
<ul>
<li>
<div>１</div>
</li>
<li>
<div>２</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

#sample2.css
.menu ul{
margin-top:0px;
}
.link1{
color:red;
text-decoration:underline;
}
.link2{
color:blue;
}
.hide{
display:none;
}

#sample2.js
window.onload=function(){
setMenu();
}
function setMenu(){
var tags=document.getElementsByTagName("div");
var menu=new Object();
var count=0;
for(var i=0;i<tags.length;i++){
if(tags[i].className=="menu"){
menu[count++]=tags[i];
}
}
for(var i in menu){
var tags=menu[i].getElementsByTagName("div");
for(var j=0;j<tags.length;j++){
var sib=tags[j].nextSibling;
while(sib){
if(sib.nodeName=="UL"){
tags[j].className="link1";
tags[j].onclick=treeMenu;
sib.className="hide";
break;
}
sib=sib.nextSibling;
}
}
}
}
function treeMenu(){
this.className=this.className=="link1"?"link2":"link1"
var sib=this.nextSibling;
while(sib){
if(sib.nodeName=="UL"){
sib.className=sib.className=="hide"?"":"hide";
break;
}
sib=sib.nextSibling;
}
}

- 0
- 件

通報する

No.4

回答者： ai10
回答日時：2008/02/17 02:46

スタイルシートで非表示にしてしまうと、

非スクリプト環境ではメニューが非表示のままになってしまう。
できればスクリプト側で(最初の非表示処理も含め、)すべてやってしまいたい。
そのほうが非スクリプト環境でもメニューが全て表示されたままになるので大丈夫です。
-----------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
　<head>
　　<meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'>
　　<meta http-equiv='Content-Style-Type' content='text/css'>
　　<meta http-equiv='Content-Script-Type' content='text/javascript'>
　　<script type='text/javascript'>
　　　//@cc_on
　　　// **** リストの非表示 ****
　　　( function ( selector, property )
　　　{
　　　　　/*@if (@_jscript)
　　　　　　var stylesheet = document.createStyleSheet();
　　　　　　stylesheet.addRule( selector, property, -1 );
　　　　　　stylesheet = null;
　　　　　@else@*/
　　　　　　var style = document.getElementsByTagName( 'head' )[0].appendChild(
　　　　　　　　document.createElement( 'style' )
　　　　　　);
　　　　　　style.sheet.insertRule( selector+'{'+property+';}', style.sheet.cssRules.length );
　　　　　　style = null;
　　　　　/*@end@*/
　　　　　// destroy
　　　　　selector = property = null;
　　　} )( '.tree-list', 'display:none' );

　　　// **** ページロード時に実行する ****
　　　( function ( addEvent )
　　　{
　　　　　window./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'load', function ()
　　　　　{
　　　　　　　var arrIds = [ 'id-tree-1', 'id-tree-2', 'id-tree-3' ];
　　　　　　　var i, I;
　　　　　　　for( i=0, I=arrIds.length; i<I; i++ ) addEvent( arrIds[i] );
　　　　　　　// destroy
　　　　　　　i = I = arrIdx = addEvent = null;
　　　　　}, false );
　　　} )(
　　　　　// イベント登録用関数
　　　　　( function ()
　　　　　{
　　　　　　　var _regexp = {
　　　　　　　　　'id'　　: /^id-tree-[0-9]+$/i,
　　　　　　　　　'class' : /^tree-list$/
　　　　　　　};
　　　　　　　return function ( id )
　　　　　　　{
　　　　　　　　　var obj = document.getElementById( id );
　　　　　　　　　obj = obj.childNodes[0]; while( obj.nodeType==3 ) obj = obj.nextSibling; if( !obj ) return;
　　　　　　　　　obj = obj.childNodes[0]; while( obj.nodeType==3 ) obj = obj.nextSibling; if( !obj ) return;
　　　　　　　　　obj./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'click', function ( evt )
　　　　　　　　　{
　　　　　　　　　　　var obj = evt.srcElement || evt.target;

　　　　　　　　　　　// class='tree-list'を探す。ちょっと非効率だけど。
　　　　　　　　　　　obj = obj.parentNode;
　　　　　　　　　　　while( obj && ( obj.nodeType==3 || !_regexp['class'].test( obj.className ) ) ) obj = obj.nextSibling;
　　　　　　　　　　　if( !obj ) return;

　　　　　　　　　　　// 表示の切り替え
　　　　　　　　　　　if( obj.style.display != 'block' ) obj.style.display = 'block'; else obj.style.display = 'none';

　　　　　　　　　　　// destroy
　　　　　　　　　　　obj = null;
　　　　　　　　　}, false );
　　　　　　　　　// destroy
　　　　　　　　　id = obj = null;
　　　　　　　}
　　　　　} )()
　　　);
　　</script>
　　<style type='text/css'>
　　　.tree .tree-title { cursor : pointer; }
　　</style>
　</head>
　<body>
　　<div id='id-tree-1' class='tree'>
　　　<div><span class='tree-title'>メニューだ</span></div>
　　　<ul class='tree-list'>
　　　　<li>
　　　　　<div id='id-tree-2' class='tree'>
　　　　　　<div><span class='tree-title'>あ</span></div>
　　　　　　<ul class='tree-list'>
　　　　　　　<li>
　　　　　　　　<div>
　　　　　　　　　Ａ
　　　　　　　　</div>
　　　　　　　</li>
　　　　　　　<li>
　　　　　　　　<div>
　　　　　　　　　Ｂ
　　　　　　　　</div>
　　　　　　　</li>
　　　　　　</ul>
　　　　　</div>
　　　　</li>
　　　　<li>
　　　　　<div id='id-tree-3' class='tree'>
　　　　　　<div><span class='tree-title'>い</span></div>
　　　　　　<ul class='tree-list'>
　　　　　　　<li>
　　　　　　　　<div>
　　　　　　　　　Ｃ
　　　　　　　　</div>
　　　　　　　</li>
　　　　　　　<li>
　　　　　　　　<div>
　　　　　　　　　Ｄ
　　　　　　　　</div>
　　　　　　　</li>
　　　　　　</ul>
　　　　　</div>
　　　　</li>
　　　</ul>
　　</div>
　</body>
</html>
-----------------------------------------------------------------------------------
なるべくグローバル変数は使わない方向でプログラミングしています。
また、ソースの行頭のインデントは全角スペースが使われていますので
もしこのソースを使うのであれば、全角スペースを半角スペースに置換して下さい。

- 0
- 件

通報する

この回答へのお礼

ご意見ありがとうございました。

No.3 yambejpさん同様、
ai10さん方法は今後の参考にさせて頂きます。
ご意見ありがとうございました。

通報する

お礼日時：2008/02/18 02:24

No.3

回答者： yambejp
回答日時：2008/02/17 01:59

リストといえばやっぱりULでしょう

javascriptで初期設定してしまえば、ULの構造を書けば自動でメニューになります。
link1とかlink2というclassをいじればメニューの見せ方も替えられます。
今回は適当に多段にし、スタイルシートやスクリプトは外部にまとめときました。

# sample.css
.menu{
padding:0px;
margin:0px;
}
.menu ul{
margin-top:-1em;
}
.menu li{
list-style:none;
margin:0px;
padding:0px;
}
.hide{
display:none;
}
.link1{
color:red;
text-decoration:underline;
}
.link2{
color:blue;
}

#sample.js
window.onload=function(){
setMenu();
}
function setMenu(){
var uls=document.getElementsByTagName("ul");
var menu=new Object();
var count=0;
for(var i=0;i<uls.length;i++){
if(uls[i].className=="menu"){
menu[count++]=uls[i];
}
}
for(var i in menu){
var lis=menu[i].getElementsByTagName("li");
for(var j=0;j<lis.length;j++){
var l=lis[j].getElementsByTagName("ul").length;
if(l>0){
var c=lis[j].parentNode.firstChild;
var pre=new Object();
while(c){
if(c.nodeName.toUpperCase()=="LI"){
if(c==lis[j]){
pre.onclick=treeMenu;
pre.className="link1";
c.className="hide";
break;
}
pre=c;
}
c=c.nextSibling;
}
}
}
}
}
function treeMenu(){
this.className=this.className=="link1"?"link2":"link1"
var s=this.nextSibling;
while (s) {
if(s.nodeName.toUpperCase()=="LI"){
s.className=s.className=="hide"?"":"hide";
break;
}
s=s.nextSibling;
}
}

#sample.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css" />
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<ul class="menu">
<li>元の文字</li>
<li>
<ul>
<li>あ</li>
<li>
<ul>
<li>Ａ</li>
<li>
<ul>
<li>１</li>
<li>
<ul>
<li>Ｘ</li>
<li>Ｙ</li>
<li>Ｚ</li>
</ul>
</li>
<li>２</li>
<li>３</li>
<li>
<ul>
<li>Ｘ</li>
<li>Ｙ</li>
<li>Ｚ</li>
</ul>
</li>
</ul>
</li>
<li>Ｂ</li>
</ul>
</li>
<li>い</li>
<li>
<ul>
<li>Ｃ</li>
<li>Ｄ</li>
<li>
<ul>
<li>１</li>
<li>２</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご意見ありがとうございました。
今回は、質問文に記載したモノの
一部変更での質問でしたので、
No.1 redfox63さん　No.2 leap_dayさんの
やり方で直しました。

yambejpさんの方法は知らなかったので、
今後に役立てたいと思います。
ご意見ありがとうございました。

通報する

お礼日時：2008/02/18 02:20

No.1

回答者： redfox63
回答日時：2008/02/16 01:43

DIVの範囲を見直せばいいように思います

<DIV id="treeMenu2" style="display:none">はA,Bのリンクまでとすればいいでしょう

<A href="javaScript:treeMenu('treeMenu1')">元の文字</A><br>
<DIV id="treeMenu1" style="display:none">
<br>
<A style="color :white;" href="javaScript:treeMenu('treeMenu2')">
　　あ</A><br>
<DIV id="treeMenu2" style="display:none">
　　<A style="color : red;" href="＊＊＊(←URL省略)">Ａ</A><BR>
　　<A style="color : red;" href="＊＊＊">Ｂ</A><BR>
<br>

</DIV>
<A style="color : white;" href="javaScript:treeMenu('treeMenu3')">
　　い</A><br>
<DIV id="treeMenu3" style="display:none">
　　<A style="color : red;" href="＊＊＊">Ｃ</A><BR>
　　<A style="color : red;" href="＊＊＊">Ｄ</A><BR>

</DIV>
</DIV>