![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
元の文字
→あ
→A
→B
→い
→C
→D
「元の文字」をクリックすると「あ」「い」が同時に出現。
「あ」をクリックすると「A」「B」が出現。
となるようにしたいのですが、
<HEAD>~</HEAD>内↓
<SCRIPT language="JavaScript">
<!--
// ツリーメニュー
flag = false;
function treeMenu(tName) {
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
//-->
</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</A><BR>
<A style="color : red;" href="***">B</A><BR>
<br>
<A style="color : white;" href="javaScript:treeMenu('treeMenu3')">
い</A><br>
<DIV id="treeMenu3" style="display:none">
<A style="color : red;" href="***">C</A><BR>
<A style="color : red;" href="***">D</A><BR>
</DIV>
</DIV>
</DIV>
とすると、
「元の文字」をクリックすると「あ」が出現。
「あ」をクリックすると「A」「B」「い」が出現となります。
上記タグを少し変更して「あ」「い」を
同時に出現させる方法を教えて頂きたいです。
treeMenu○部分の変更で、出来るかと思ったのですが、
上手くいきませんでした。
宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
こんにちは
<div id="treeMenu2">でDまで同じブロックでしているので全部出てしまいますので#1様のように<div>を分割してください
あと気になる点が3点ほどあったので余計なお世話かと思いますが追記します
1点目はdocument.allだとdocument.allが効くIEやOperaなどでは階層メニューになるのですが効かないFirefoxなどでは階層メニューにはなりません(><)
汎用的にするには
document.getElementById(tName)
のようになります
2点目は<br>なんですが<div>はブロック要素なのでそれ自体で改行を含んでいます
A~B、C~D間の<br>以外はいらないような気がします
開いたときに、元の文字~あ、B~い間に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";
}
※一例ですので別のやり方で閉じてもいいです
お礼が遅くなってしまい、すみません。
質問以外の不備もご指摘頂き、
ありがとうございました。
私自身気づいていないところもあったので、
大変、助かりました。ありがとうございました。
No.5
- 回答日時:
おお、そうか構造上は#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>A</div>
<ul>
<li>
<div>1</div>
<ul>
<li>
<div>X</div>
</li>
<li>
<div>Y</div>
</li>
<li>
<div>Z</div>
</li>
</ul>
</li>
<li>
<div>2</div>
</li>
<li>
<div>3</div>
<ul>
<li>
<div>X</div>
</li>
<li>
<div>Y</div>
</li>
<li>
<div>Z</div>
</li>
</ul>
</li>
</ul>
<li>
<div>B</div>
</li>
</ul>
</li>
<li>
<div>い</div>
<ul>
<li>
<div>C</div>
</li>
<li>
<div>D</div>
<ul>
<li>
<div>1</div>
</li>
<li>
<div>2</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;
}
}
No.4
- 回答日時:
スタイルシートで非表示にしてしまうと、
非スクリプト環境ではメニューが非表示のままになってしまう。
できればスクリプト側で(最初の非表示処理も含め、)すべてやってしまいたい。
そのほうが非スクリプト環境でもメニューが全て表示されたままになるので大丈夫です。
-----------------------------------------------------------------------------------
<!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>
A
</div>
</li>
<li>
<div>
B
</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>
C
</div>
</li>
<li>
<div>
D
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
-----------------------------------------------------------------------------------
なるべくグローバル変数は使わない方向でプログラミングしています。
また、ソースの行頭のインデントは全角スペースが使われていますので
もしこのソースを使うのであれば、全角スペースを半角スペースに置換して下さい。
ご意見ありがとうございました。
No.3 yambejpさん同様、
ai10さん方法は今後の参考にさせて頂きます。
ご意見ありがとうございました。
No.3
- 回答日時:
リストといえばやっぱり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>A</li>
<li>
<ul>
<li>1</li>
<li>
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li>
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</li>
</ul>
</li>
<li>B</li>
</ul>
</li>
<li>い</li>
<li>
<ul>
<li>C</li>
<li>D</li>
<li>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
ご意見ありがとうございました。
今回は、質問文に記載したモノの
一部変更での質問でしたので、
No.1 redfox63さん No.2 leap_dayさんの
やり方で直しました。
yambejpさんの方法は知らなかったので、
今後に役立てたいと思います。
ご意見ありがとうございました。
No.1
- 回答日時:
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</A><BR>
<A style="color : red;" href="***">B</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="***">C</A><BR>
<A style="color : red;" href="***">D</A><BR>
<!-- ここの閉じタグを移動 -->
</DIV>
</DIV>
お礼が遅くなってすみません。
ご指摘頂いた通り変更したところ、
望んでいたように動作しました。
御意見、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
どの<li><a> が押されたか判別...
-
フォームのテキストエリアに検...
-
文字と数字が混在する要素のsor...
-
折りたたみメニューがFirefoxで...
-
「jQuery」アコーディオンメニ...
-
質問に答えていくと、回答によ...
-
アコーディオンメニューの開閉制御
-
JavaScriptで、?マークとコロ...
-
助けてください… jQuery 左右に...
-
JQueryタブのアクティブ アン...
-
jQueryのhide,showで中の要素が...
-
ホームページビルダー15 メニュ...
-
3階層メニューについての質問...
-
jqueryで複数のIDをまとめたい...
-
クリックしたら文章が入れ替わ...
-
jquery ドロップダウンメニュー...
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
textareaに画像を表示したい
-
Javascriptで画像を水面のよう...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
クリックした<a>タグのみにClas...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
JavaScriptによる疑似プルダウ...
-
jQueryのeqで最後からn番目以降...
-
javascriptでEnterキーをtabキ...
-
Jquery タブで、4つのliのうち...
-
【javascript で動的に a タグ...
-
どの<li><a> が押されたか判別...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
jqueryプルダウンメニュー個別着色
-
JavaScript インクリメントの書...
-
複数の画像をランダム(シャッ...
-
タブ切り替えの初期表示について
おすすめ情報