- ベストアンサー
お気に入りフォルダみたいな表示をするタグ
コレ↓(○○○のみ)をクリックしたら ○○○ ●● こういう風に↓ ○○○ ├△△△ ├■■■ └☆☆ ●● つらつらっと中身というかリンクというかテキストが表示されて 続けて●●をクリックすると ○○○ ●● ├＊＊＊ └◎◎ ○○○が閉じて●●の中身が表示される。 というのはどうやったらいいのでしょうか？ (説明わかりにくかったらごめんなさい…) 自分でも一応作ったんですが簡単に言うと ○○○をクリックすると中身を表示 ●●の中身を非表示 ●●をクリックすると中身を表示 ○○○の中身を非表示 のような内容で作ったので数が増えるとやたらと長くなってしまいます。 もっとシンプルに作れないでしょうか？ 以前にも似たような質問をしたのですが中身が増えるにつれて長くなってしまって…。 お願いします。
- meto01
- お礼率25% (6/24)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
以下のリンク先が参考になるかと思います。（個人的には１つめのリンク先のが分かりやすいと思います＾＾） http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_110.html http://www.hajimeteno.ne.jp/dhtml/dist/js46.html 表示・非表示（display）を変更する関数を作ってそこへ引数としてオブジェクトのidを送ってやることでシンプルになると共に汎用性が高まります。 ポイントとしては引数としてオブジェクトのidを送るとき「'（シングルクォーテーション）」で囲んでおくことですかね？
その他の回答 (1)
<html> <head> <title>####</title> <style type="text/css"> #TMenu { padding : 0 ; } #TMenu img{ vertical-align : middle ; } #TMenu a{ text-decoration : none ; padding : 3px ; display : block ; background-color : #ffffe0 ; } #TMenu a:hover{ text-decoration : underline ; background-color : #dddddd ; } #TMenu span{ padding : 3px ; display : block ; } #TMenu span:hover{ background-color : #dddddd ; } #TMenu div{ display : none ; margin : 0 5px 5px 20px ; border : 1px solid #dddddd ; background-color : #ffffe0 ; } </style> <script type="text/javascript"> window.onload = function(){ if(document.getElementById('TMenu')){ TreeMenu() } } function TreeMenu(){ var TMENU = document.getElementById('TMenu') var SPAN = TMENU.getElementsByTagName('span') var DIV = TMENU.getElementsByTagName('div') for(var i = 0;i < SPAN.length;i++){ DIV[i].style.display = 'none' SPAN[i].onclick = function(Event){ if(Event){ Event = Event }else{ Event = event } Event.cancelBubble = true var TMENU = document.getElementById('TMenu') var SPAN = TMENU.getElementsByTagName('span') var DIV = TMENU.getElementsByTagName('div') for(var i = 0;i < SPAN.length;i++){ if(this == SPAN[i]&&DIV[i].style.display != 'block'){ DIV[i].style.display = 'block' }else{ DIV[i].style.display = 'none' } } } } } </script> </head> <body> <div id="TMenu"> <span>aaaa</span> <div> <a href="#">aaa</a> </div> <span>aaaa</span> <div> <a href="#">aaa</a> </div> </div> </body> </html> これで良いとじゃないですかね。 <div id="TMenu">を入れなければスクリプトは動きません。 <div id="TMenu">の中身はspan（●●の部分）とdiv（○○○を書く部分）で作りこのdivの中にリンクを設置。
