• 締切済み

ツリーメニューで子のページのとき親が開く

他のプログラムと連携しています 現時点ではクリックすれば親が開き子の部分が出てくるようにしています。 子のページのURLを見たときに ツリーのその親は自動的に開きたいのです。 show('1');のこの”1”は他のプログラムから出力しているものです。 子のものも同じように値を出力できるのですが JavaScriptでどのように書けば親が開くのかよくわかりません^^;。 よろしくお願いします。 //javascript// function show(inputData) { var objID=document.getElementById( "obj_" + inputData ); var buttonID=document.getElementById( "button_" + inputData ); if(objID.className=='close'){ objID.style.display='block'; objID.className='open'; buttonID.src='images/close.gif'; } else{ objID.style.display='none'; objID.className='close'; buttonID.src='images/open.gif'; } } //HTML// <ul> <li><input type="image" src="images/open.gif" id="button_1" onclick="show('1');"> <a href="javascript:show(1)">Aメニュー</a> </li> <div id="obj_1" style="display:none;position:relative;" class="close"> <ul><li><a href="11.html" >A-1メニュー </a></li> <li><a href="12.html">A-2メニュー </a></li> <li><a href="11.html" >A-3メニュー </a></li> </ul> </div> </ul> <ul> <li><input type="image" src="images/open.gif" id="button_2" onclick="show('2');"> <a href="javascript:show(2)">Bメニュー</a> </li> <div id="obj_2" style="display:none;position:relative;" class="close"> <ul><li><a href="21.html">B-1メニュー </a></li> <li><a href="22.html">B-2メニュー </a></li> <li><a href="23.html">B-3メニュー </a></li> </ul> </div> </ul>

noname#61859
noname#61859

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

>子のページのURLを見たときに >ツリーのその親は自動的に開きたいのです。 なにをしたいのか正確な意味がつかめません 「子のページのURLを見たとき」というのは フレームかなにかでURLが移ったときということですか? もうすこし補足が必要です

noname#61859
質問者

補足

フレームは使っていません。 メニューの部分は他のプログラムでinnerHTMLのように呼び出して出力している形です。 メニューにはIDが登録されていまして。 AメニューにはIDが1と言うようになっています。 この数字はばらばらです。 IDとURLは一致しています。

関連するQ&A

  • 折りたたみタグ 他を閉じる(非表示にする)

    折りたたみリンクが複数ある場合で、 一つ開くと他の開いた折りたたみリンクが閉じる(常に表示されるのは一つだけ)スクリプトを探しています。 以下のタグを使わせて頂いてます。 function show(inputData) { var objID=document.getElementById( "layer_" + inputData ); var buttonID=document.getElementById( "category_" + inputData ); if(objID.className=='close') { objID.style.display='block'; objID.className='open'; }else{ objID.style.display='none'; objID.className='close'; } } <a href="javascript:void(0)" id="category_@@@@" onClick="show('@@@@');"> リンク </a> <div id="layer_@@@@" style="display:none" class="close"> 隠れた内容 </div> http://homepage3.nifty.com/kmyh/gaku/hyouzi2.html こちらで見つけたので、少しの修正でなんとかできないかと上記の使っている ものを少しずついじって試してみたのですが、動かなくなるだけでしたので、 丸々スクリプトを取り替えてみたのですが、何が悪かったのか動きませんでした…。 既にたくさん使用しているので、できれば丸々とりかえるのではなく、 簡単な修正で変更できたらいいなと思っております…。 ご助力よろしくお願い致します。

  • javascriptとCSSを使ってのドロップダウンメニュー作成

    CSSとJavaScriptを使って ドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。 ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="~">category</a> <ul> <li><a href="~">Overview</a></li> <li><a href="~">Overview</a></li> </ul> <ul> <li id="category"><a href="~">category</a> <ul> <li><a href="~">Overview</a></li> <li><a href="~">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();

  • 画像メニューの開閉

    JavaScriptで画像メニューの開閉を行いたいのですが、 うまく動きません。 「aaa」が閉じていた場合には「aaa」を開くまではできたのですが、 「bbb」を閉じるという1行を追加したら動かなくなりました。 どなたかご教授願います。 【JavaScript】 function showSubmenu01() { if(document.getElementById("aaaSub").innerHTML == '') document.getElementById("aaaSub").innerHTML = '<img src="aaa.gif">'; document.getElementById("bbbSub").innerHTML = ''; else document.getElementById("aaaSub").innerHTML = ''; } 【HTMLソース】 <ul> <li><a href="#" onClick="showSubmenu01()"><img src="img/menu_aaa.gif" /></a></li> <li><div id="aaaSub"></div></li> <li><div id="bbbSub"><img src="bbb.gif" /></div></li> </ul>

  • 折り畳みメニューを使った場合の画像の空きについて

    使用ソフトはドリームウィーバーです。 折り畳みメニューを使いたく、以下のとおり書いたのですが、 なぜか、サブメニューの画像が開いたときに微妙に空きがでます。 マージン0にしてあるのですが、どうしても画像と画像の間があいてしまいます。 どうやったら詰められるのでしょうか? 教えていただけますか? <script language="JavaScript"> <!-- function msl(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='block' else if(document.all)document.all(idmn).style.display='block' } function kks(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='none' else if(document.all)document.all(idmn).style.display='none' } //--> </script> <style type="text/css"> <!-- .menu{ width : 110px; cursor : pointer; } .sub{ display : none; margin: 0px; padding: 0px; } ul{ margin:0px; padding: 0px; } ul li{ margin:0px; list-style-type: none; padding: 0px; height: 22px; width: 110px; } ul li img{ margin:0px; padding: 0px; } --> </style> </head> <body> <noscript>※JavaScriptを有効にしてご覧下さい。</noscript> <div class="menu" onclick="javascript:msl('sub_a')" ondblclick="javascript:kks('sub_a')"><img src="シモン/html/images/menu01.gif" /></div> <ul class="sub" id="sub_a"> <li><img src="シモン/html/images/menu01_01.gif" /></li> <li><img src="シモン/html/images/menu01_02.gif" /></li> <li><img src="シモン/html/images/menu01_03.gif" /></li> <li><img src="シモン/html/images/menu01_04.gif" /></li> <li><img src="シモン/html/images/menu01_05.gif" /></li> </ul>

  • アコーディオンメニューが開いている間の親の色変更

    jQueryでアコーディオンメニューを作成中です。 雛形を参考に形にはなりましたが、開いている状態でどの親メニューに属する子メニューなのかがわかりづらいため、子を表示している間の親画像を変更したいです。 参考URLのデモページで言いますと、親メニューの背景がオンマウスで黒からオレンジになります。しかし、子メニューを選択しようとマウスが親から外れると黒に戻ってしまいます。これを子が表示されている間、オレンジの状態にしたいのです。 現在私が作成中のメニューもオンマウスのときのみ色が変わるような状態になっています。web初心者のため、やさしく具体的に教えていただければ幸いです。 参考にしたURL http://blog-imgs-48-origin.fc2.com/j/q/u/jqueryintro/accordion.html 以下、HTMLの記述です。 文字数の関係上いろいろと省いたため、回答の際に足りない部分があれば追加いたしますのでお教えください。 お力をお貸しください。よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <link rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" ></script> <script src="js/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ /* 開く・閉じる*/ $("ul.menu").hide(); $("ul.menu2").hide(); $("div#title").click(function(){ $("div#title").not(this).next().hide('fast'); $(this).next().slideToggle('fast'); }); $("#menu2 #title2").click(function(){ $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div style="text-align:left; width: 220px; height: 40px;"> <!--HOME--> <div> <ul><a href="#"><img src="imgs/a01.gif" width="200" height="40" onMouseOver="this.src='imgs/a02.gif'" onMouseOut="this.src='imgs/a01.gif'"></a> </ul> </div> <!--MENU1--> <div id="title"><img src="imgs/b01.gif" width="200" height="40" onMouseOver="this.src='imgs/b02.gif'" onMouseOut="this.src='imgs/b01.gif'"></div> <ul class="menu"> <li><a href="#"> <img src="imgs/c01.gif" width="220" height="40" onMouseOver="this.src='imgs/c02.gif'" onMouseOut="this.src='imgs/c01.gif'"></a></li> <li><a href="#"> <img src="imgs/d01.gif" width="220" height="40" onMouseOver="this.src='imgs/d02.gif'" onMouseOut="this.src='imgs/d01.gif'"></a></li> </ul> <!--MENU2--> <div> <ul><a href="#"><img src="imgs/e01.gif" width="200" height="40" onMouseOver="this.src='imgs/e02.gif'" onMouseOut="this.src='imgs/e.gif'"></a> </ul> </div> </div> </body> </html>

  • html,cssプルダウンメニューについて教えてください。

    html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません) 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}

  • ドロップダウンメニューを作るこのCSSどこが変?

    お世話になります。 Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目(background-imageがついてくる)が展開していくよくある仕様です。 ネットでの情報を参考にしながら、書いたソースが以下のものですが、 問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される (2)テキスト分しか表示されない、きちんと画像全体を表示させたい! 個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。 もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。 もしよろしければアドバイスお願いします。 HTML--- <div id="global_nav"> <ul> <li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="#">会社概要</a></li> <li><a href="#">営業所</a></li> </ul> </li> <li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li> </ul> </div> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:2px; } #global_nav ul ul a { font-family:"MS Pゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:40px; width:120px; text-decoration:none; text-align:center; padding:20px 10px 0 10px; } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; }

    • ベストアンサー
    • CSS
  • プルダウンメニューの設置について

    【質問内容】 画像のすぐ上にドロップダウンメニューを設置したいのですが、 マウスオンすると下部の画像の表示位置が下がってしまいます。 この画像表示位置を動かないようにするにはどうすればいいのでしょうか? 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="navi_continer"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 1</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <img src="shingo/images/1.TOP.jpg" width="150" height="150" alt="#" /> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 2</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> <li><a href="#">サブメニュー 4</a></li> </ul> </li> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 3</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> 【css】 @charset "utf-8"; #navi_continer { position: relative; z-index:100; width: 300px; height:30px; } #navi { position: absolute; top: 10px; left: 10px; width: 150px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:1px solid #000099; } #navi li.navi_menu_on{ border:1px solid #000099; } ご教授お願いします。

  • プルダウンのメニュー表示について

    JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1  ●メニュー1-1  ●メニュー1-2  ●メニュー1-3  ●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか? 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか? 以下がコードの一部です。 [html] <div class="tree">   <a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a>   <div class="tree_sub">     <ul>       <li class="left">●メニュー1-1</li>       <li>●メニュー1-2</li>     </ul>     <ul>       <li class="left">●メニュー1-3</li>       <li>●メニュー1-4</li>     </ul>   </div> </div> <div class="tree">   <a href="#">○メニュー2</a> </div> [css] div.tree {   border-bottom:1px solid #000000;   width:365px; } div.tree_sub ul li {   float:left; } div.tree_sub ul li.left {   width:50%; }

  • mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい

    javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして  単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、  2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 (先に読み込ませた方のプルダウンメニューが決まって動作しません)

専門家に質問してみよう