• 締切済み
  • すぐに回答を!

戻ってきた時ツリーメニューが開いているようにクッキーを保存させたい

タイトルの通り、開いたツリーメニューからリンクを踏んで、またメニューのあるページに戻ってきた時にメニューを開いたままにしたいです。 色々と調べるうちにcookieを使うことはわかったのですが、どこもツリーメニューの方法が違うため載っているソースのどこを弄れば自分の使ったツリーメニューに対応させられるのかわかりませんでした。 javascriptを切った状態では開いたまま表示させたいので、ツリーメニューのソースは以下を参考にさせていただきました。 http://blog.ptlabo.net/index.php?id=06100064 これを利用して「戻ってきた時ツリーメニューを開いた状態に」することはできますか? できない場合、 ・cssオン、javascriptオフの状態では開いている ・ブラウザバックしたときに開いている この条件に合うツリーメニューであれば何でも良いのでお教えいただきたいです。 初心者ですので詳細にご教授いただければ幸いです。 よろしくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数5
  • 閲覧数785
  • ありがとう数5

みんなの回答

  • 回答No.5
noname#84373

要望を実現するためには、折りたたみのある項目すべて(もしくはどちらか一方をすべて)を保存する必要があります。 クッキーに保存できる文字数は限られています(4kだったかな?) それ以下なら実現できると思いますが、私にはそこまで書く気力がありません。 これまでの事をヒントにご自分で努力することをお勧めします 私は、自分の書いたコードが最良だと思っていません。 むしろ毎日勉強している立場です。 今度はあなたの自助努力の成果を見せていただきたいと思っております

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • ツリーメニューでのcookieの使用方法

    いつもお世話になっております。 毎回丁寧なご回答、本当にありがとうございます。 現在、JavaScriptを利用し、ツリーメニューを作成しているのですが、 次のページに行った際や戻った際、更新を押した際に、 先程まで開いていたツリーメニューが、閉じてしまわないように、 cookieを利用し開いた状態に保ちたいと思っております。 一応、参考になるサイトがあり出来たことは出来たのですが、 そちらの方法を利用すると上記の操作を行った際に、 全てのメニューが一瞬開いてしまう現象が起きてしまいます。 一瞬全て開いた後には先程までのメニューはちゃんと記憶され開いた状態です。 今回、この「全てのメニューが一瞬開いてしまう」といのを、 なんとか直したいと思っております。 またその他に、出来る限りのブラウザに対応させたいと思っております。 JavaScriptが有効なブラウザの場合は通常通りのツリーメニュー、 無効な場合は全てが展開された状態のメニュー等。 目標としてはPCショップのドスパラ様のようなツリーメニューにしたいと思っております。 なを、メニュー部は更新の手間等を考え、 SSIを使用しインクルードしており、外部ファイルにしております。 このJavaScriptに限らず、別なJavaScriptでも結構ですので、 具体的なサイトやJavaScript自体をお書き頂けると幸いです。 今回使用したJavaScriptを作成した作者様にも伺っているのですが、 まだ返答は得られておらず、当方でも出来る限り急ぎで対処したいため、 誠に勝手ながらこちらに質問させていただきました。 何卒宜しくお願いいたします。 なお、確認ブラウザはWinXP SP2 & IE6.0とFirefox2.0とNetscape 7.1です。 一応、現在参照しているJavaScriptのページを下記に記載いたします。 http://himajin.moo.jp/menu/menu1.html

  • ツリーメニューについて質問です。

    ツリーメニューについて質問です。 いくつかのサイトを参考にし、コピー&ペーストでjavascriptを使ってツリーメニューを作成したのですが、ツリーメニューが展開された状態で表示されてしまいます。 閉じた状態で表示したいのですが、どうすればいいでしょうか。 ここにソースを載せようと思いましたが入りませんでしたので、載せられません。 主に参考にしたのは、このサイトです。 http://himajin.moo.jp/java/menu2.html このサイトのものに何を足せば良い、とかそのようなソースが載っているサイトがもしあれば教えてほしいです。 よろしくお願いします。 ちなみに私は超初心者です><

  • ツリーメニューでクッキーを使いたいのですが・・

    JavaScript初心者です。ツリーメニューを使いたいのですが、リンクから別のページ(別のディレクトリ)に移動した時、クッキーを使って、展開した状態を保持したいのですが、よく分かりません。 enptybox22さんの http://oshiete.homes.jp/qa3084680.html 回答記事にあったクッキー処理のプログラムをそのまま入れてみたのですがうまく動きません。 設置URLは http://blove.cc/tes1/ になります。 どうぞよろしくお願いいたします。

  • 回答No.4
noname#84373

訂正します。 これまでの場合はツリーメニュー以外のLIとかULにも処理が及んでしますので、一番親のULにclass="treemenu"を追加します クリックされるとその度にチェックしにいきます。 なのでそこを訂正しました! しかも初の説明付き! <html> <body>  <ul id="a" class="treemenu">   <li>A    <ul>     <li><a href="htp://blove.cc/tes1/">A-1</a></li>     <li>A-2      <ul>       <li><a href="htp://blove.cc/tes1/">ページ1へ飛ぶ</a></li>       <li><a href="htp://blove.cc/tes2/">ページ2へ飛ぶ</a></li>      </ul>     </li>     <li>A-3      <ul>       <li><a href="htp://blove.cc/tes1/">ページ1へ飛</a></li>       <li><a href="htp://blove.cc/tes2/">ページ2へ飛ぶ</a></li>      </ul>     </li>    </ul>   </li>   <li>b   <ul>    <li><a href="htp://blove.cc/tes1/">ページ1へ飛ぶ</a></li>    <li><a href="htp://blove.cc/tes2/">ページ2へ飛ぶ</a></li>   </ul>   </li>  </ul> <script> addEvent( window,'load', function(){ openTreeMenu2('a') }); //イベントはwindow.onload=function(){ でもいいが、他のプログラムとの共用ができないかも!なので追加 addEvent( document.body, 'click', chkClick );//onclickイベントは、いろいろなところにとりつけるよりも、body1箇所ですませるとすっきり function chkClick( evt ){//クリックのイベント処理  var element = evt.target || event.srcElement;//イベントが起きた箇所のエレメントを調べる  if( element.tagName != 'LI' ) return; //タグがLI以外なら必要ないのでやめる  if( !checkParentCSS( element, 'ul', 'treemenu' ) ) return;//エレメントが属する親を調べてclassに"tremenu"があるか調べる。このおかげで普通のULなのかメニューなのかわかる  putCookie( 'li', getFirstText( element ),10);//LI要素の最初の#textノードの文字を調べ、クッキーに保存する。期間は10日  putCookie( 'lic', getChildDisplay( element ),10);//li要素の子のulが開いているか閉じているかも調べクッキーに保存する  if(1) openTreeMenu2('a'); //1なら対象外は隠す。メニューの折りたたみに好みがあるみたいなので0か1を指定  else {   var ul = element.firstChild;//liの中にあるulを調べて開くか閉じるか決める   while( ul.nodeName != 'UL' ){ ul = ul.nextSibling; if( !ul ) return }//ulを探す。そうでなければ戻る   ul.style.display = ( ul.style.display == 'none') ? 'block':'none';//閉じていれば開き、そうでなければ逆に三項演算子を利用  } } function checkParentCSS( element, tag, css ){//親のタグとクラスを探る。今回は li で treemenu  var tag = tag.toUpperCase();//タグを返す関数は大文字を返すので、大文字にしておく  var reg = new RegExp( '\b*'+ css+ '\b*' );//正規表現で検索。なので className=" abc treemenu di dfji" みたいなのでも見つけ出せる  while( element = element.parentNode ){//treeの親をどんどん探す。   if( element.tagName == tag && element.className.match( reg ) ) return true;//タグが同じでクラスも同じなら有りで帰る   if( element.tagName == 'BODY' ) return false;//親をたどると結局、空になるがBODYでやめる。だからなくてもいいかな?  } } function openTreeMenu2( elementId, keyword, flag ){//折りたたみメニューの本体  var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;//idでもオブジェクトでも処理  var ul = element.getElementsByTagName('ul');//id="a"以下のすべてのulを拾い出す  for( var i=0, m= ul.length; i<m; i++) ul[i].style.display = 'none';//すべてのULを一旦、消す  keyword = keyword || getCookie('li');//keywordは今回使用していないが、無い場合はクッキーに保存したliのテキストを読み込む  flag = flag || getCookie('lic') - 0;//flafはそのLI要素の中のULが、開いているかどうかを保存してある  if( keyword ) {//LIにあるテキストをさがす   var li = element.getElementsByTagName( 'li' );//すべてのLIのテキストを検索するために収集   for( var i=0, m=li.length;i<m;i++){//ループ処理    if( getFirstText( li[i] ) == keyword ){//LI要素のテキストと検索するテキストを比較     var descendant = li[i];//一致したので、ここを基準に閉じたULを開いていく     do {      var descendant = descendant.parentNode;//親の親      if( descendant.nodeName == 'UL' ) descendant.style.display = 'block';//表示     } while( descendant.nodeName != 'BODY' )//親がBODYならやめる          if( !flag ){//今度はLIの中のULを開くかどうか?      var nd = li[i].firstChild;      while( nd ){       if( nd.nodeName == 'UL' ) nd.style.display = 'block';//ULタグが見つかったら表示する       nd = nd.nextSibling;//次のエレメント(兄弟を探す)      }     }    }   }  }  element.style.display = 'block';//対象を開く } function getFirstText( element ){//タグで囲まれた中の文字を拾い出す  var nd = element.firstChild;  while( nd ){//例えば<span>abc<span> <p>~ 見たいに<p>の前に空白があると#textノードとみなされる。ブラウザによって処理が微妙   if( nd.nodeName == '#text' ) return nd.nodeValue;   nd = nd.nextSibling;  }  return false; } function getChildDisplay( element ){//今回の場合LI要素の中のUlが開いていれば1、閉じていれば0を返す  var child = element.firstChild;  while( child ){   if( child.nodeName == 'UL') if( child.style.display == 'block') return 1;   child = child.nextSibling;  }  return 0; } function addEvent(elementId, evt, eventHandler, flag){//イベント追加処理/cc_onは、IEだけが実行される。最近はこれが主流?  var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;  element./*@cc_on @if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag); } function getCookie( valueName ){//クッキーを得る  var value = '', c, cookies = document.cookie.split('; ');  for(var i in cookies)   if((c = cookies[i].split(/=/), c[0]==valueName)) return c[1]? decodeURIComponent( c[1] ): '';//文字をそのまま保存するとやばいのでエスケープ処理  return false; } function putCookie( valueName, value, day ){//クッキーの保存、保存期間は日単位  document.cookie = valueName + '=' + encodeURIComponent( value )+ '; expires='   + new Date( (new Date).getTime() + day * 86400000).toGMTString(); } </script> </body> </html>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

とても丁寧にありがとうございます! 無知故に苦労しましたが、お陰でなんとかやりたかったデザインに組み込むことができました。 重ねて質問なのですが、 >if(1) openTreeMenu2('a'); //1なら対象外は隠す。メニューの折りたたみに好みがあるみたいなので0か1を指定 ↑この値を0の「対象外も隠さない」設定にしたあと、メニューを複数開く場合、クッキーの保存が最後に開いたもののみになるようですが(メニューAを開き、そのあとBも開く→飛んで戻ってくる→Bしか開いていない という状態です)、 「複数開いた」ことを保存させるようにする事はできますか? (AもBも開いたら、AもBも開いたままにしておきたいです) しつこく聞くようで申し訳ないのですが、ご回答いただければ幸いです。

  • 回答No.3
noname#84373

遅くなりました!なんとなくカレンダーを作るのにハマってました! まじめに作ると長いね~。補足説明は、これが記憶にあるうちにね! 字下げするために全角スペースにしました。タブとかに置きかえして 使用のこと。スクリプトとスタイルシートは外部に。 <html> <body>  <ul id="a">   <li>A    <ul>     <li><a href="htp://blove.cc/tes1/">A-1</a></li>     <li>A-2      <ul>       <li><a href="htp://blove.cc/tes1/">ページ1へ飛ぶ</a></li>       <li><a href="htp://blove.cc/tes2/">ページ2へ飛ぶ</a></li>      </ul>     </li>     <li>A-3      <ul>       <li><a href="htp://blove.cc/tes1/">ページ1へ飛</a></li>       <li><a href="htp://blove.cc/tes2/">ページ2へ飛ぶ</a></li>      </ul>     </li>    </ul>   </li>   <li>b   <ul>    <li><a href="htp://blove.cc/tes1/">ページ1へ飛ぶ</a></li>    <li><a href="htp://blove.cc/tes2/">ページ2へ飛ぶ</a></li>   </ul>   </li>  </ul> <script> addEvent( window,'load', function(){ openTreeMenu2('a') }); addEvent( document.body, 'click', chkClick ); function chkClick( evt ){  var element = evt.target || event.srcElement; if( element.tagName != 'LI' ) return;  putCookie( 'li', getFirstText( element ),10);  putCookie( 'lic', getChildDisplay( element ),10);  if(1) openTreeMenu2('a'); //1なら対象外は隠す  else {   var ul = element.firstChild;   while( ul.nodeName != 'UL' ){ ul = ul.nextSibling; if( !ul ) return }   ul.style.display = ( ul.style.display == 'none') ? 'block':'none';  } } function openTreeMenu2( elementId, keyword, flag ){  var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;  var ul = element.getElementsByTagName('ul');  for( var i=0, m= ul.length; i<m; i++) ul[i].style.display = 'none';  keyword = keyword || getCookie('li');  flag = flag || getCookie('lic') - 0;  if( keyword ) {   var li = element.getElementsByTagName( 'li' );   for( var i=0, m=li.length;i<m;i++){    if( getFirstText( li[i] ) == keyword ){          var descendant = li[i];     do {      var descendant = descendant.parentNode;      if( descendant.nodeName == 'UL' ) descendant.style.display = 'block';     } while( descendant.nodeName != 'BODY' )          if( !flag ){      var nd = li[i].firstChild;      while( nd ){       if( nd.nodeName == 'UL' ) nd.style.display = 'block';       nd = nd.nextSibling;      }     }    }   }  }  element.style.display = 'block'; } function getFirstText( element ){  var nd = element.firstChild;  while( nd ){   if( nd.nodeName == '#text' ) return nd.nodeValue;   nd = nd.nextSibling;  }  return false; } function getChildDisplay( element ){  var child = element.firstChild;  while( child ){   if( child.nodeName == 'UL') if( child.style.display == 'block') return 1;   child = child.nextSibling;  }  return 0; } function addEvent(elementId, evt, eventHandler, flag){  var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;  element./*@cc_on @if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag); } function getCookie( valueName ){  var value = '', c, cookies = document.cookie.split('; ');  for(var i in cookies)   if((c = cookies[i].split(/=/), c[0]==valueName)) return c[1]? decodeURIComponent( c[1] ): '';  return false; } function putCookie( valueName, value, day ){  document.cookie = valueName + '=' + encodeURIComponent( value )+ '; expires='   + new Date( (new Date).getTime() + day * 86400000).toGMTString(); } </script> </body> </html>

共感・感謝の気持ちを伝えよう!

  • 回答No.2
noname#84373

参考にした!っていうより 書いたプログラムを見せていただいたほうが早い。 「javascriptオフでも見れる」というのであれば 逆に考えて、スクリプトが実行できるなら、 読み込みが終わった時点でメニューを折りたためば?

共感・感謝の気持ちを伝えよう!

質問者からのお礼

引き続き回答ありがとうございます。 参考にした、というかそのまま当てはめただけなので… <script type="text/javascript" language="javascript"> document.writeln("<style type=\"text/css\">"); document.writeln("#ほにゃらら{display:none;}"); document.writeln("<\/style>"); </script> をhead内に入れて、メニューの部分を、 <span onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='block'?'none':'block');"> メニュー名</span> <div id="ほにゃらら"> <a href="該当URL">項目1</a><br> <a href="該当URL">項目2</a><br> </div> という風に書きました。本当にそのままですが… これならjavascriptを切ると同時にdisplay:noneも無効になってくれそうな事が理解できたので使いたいと思ったのです。 >「javascriptオフでも見れる」というのであれば >逆に考えて、スクリプトが実行できるなら、 >読み込みが終わった時点でメニューを折りたためば? そんな事ができるのですか! 過去の質問でpipi様が回答されていたプログラムを参考に「クッキー保存させるツリーメニュー」を作成して、それを「読み込みが終わった時点でメニューを折りたたむ」ように改変、もしくは書き足しする、という事でいいのでしょうか。 お恥ずかしながらまだ、javascriptの何がどうなっているのかもわからないもので、どこをどのように弄ればそのようにプログラムすることができるのか、よろしければ教えていただきたいです。

  • 回答No.1
noname#84373

共感・感謝の気持ちを伝えよう!

質問者からのお礼

他の回答も一応見たのですが、 「javascriptオフでも見れる」という条件に合うものかどうかわからなかったので質問させていただきました。 display:noneをcssで指定するだけでは、cssがオンでjsがオフな時ツリー開きませんよね? 今回私が参考にしている方法で作ったツリーメニューをcookieに保存させる事はできないのでしょうか。

関連するQ&A

  • メニューのツリーを表示させると、cookieで、開いた状態を保存できる

    メニューのツリーを表示させると、cookieで、開いた状態を保存できるようにしていますが…。 そのようなページを2ページ作っています。 ページAでツリー1を開くと、ページBでもツリー1が開いてしまいます。 ページBで開いたツリー1を閉じると、ページAのツリー1も閉じてしまいます。 この現象、何なんでしょうか? いつからこのような状態なのか、また何故こんなことになってしまったのか、 私には全然分かりません。 どうすればなおりますか?

  • ツリーメニューのアニメーションについて

    こんにちわ。 アニメーションのツリーメニューを自分のサイトで使用したいと考えております。 javascriptを参考に、取り込んでみましたが、FireFoxで動作しません。 どうやら、もともとFireFoxで動作していないようです。 このようなアニメーションのツリーメニューを使用しているサイト、ご存じの方がいましたら教えて頂けないでしょうか? できればIE、FireFox、Opera、Safari で動作するものか ブラウザごとに使うjavascriptを分けているサイトを教えて頂けるとうれしいです。 宜しくお願いします

  • ツリーメニューの作成

    ツリーメニューの表示ができません。 記述は以下のとおりです (ヘッダー内) メタタグで標準スクリプト指定 <meta http-equiv="Content-Script-Style" content="text/javascript"> ツリーメニューの記述(某サイトよりコピペ) <script language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> ボディ内 (実際にツリーメニューを表示させる箇所) <A HREF="JavaScript:ok('tree1');"> ■メニュー </A> <div id="tree1" style="display:none;"> ツリー1<br> ツリー2<br> ツリー3<br> </div> ///////////////////////////////////////////////////////////// こんな感じです。 以前別のHTMLファイルで、ツリーメニューをつくったときには 正常に表示(クリックすると、ずらずらと出てくる)のに、今回同じソース(というのですか?)で記述してみたら、ダメでした。 「このページは表示できません」とかなります。

  • リンク先でツリーを展開したままに

    リンク先でツリーを展開したままに はじめまして、いつも参考にさせてもらってます。 こちらのソースをそのままコピペして自閉式ツリーメニューを作りました。 http://okwave.jp/qa/q5526156.html 動作はしましたが、メニューのリンクをクリックして他のページに行くとツリーが閉じてしまいます。 リンク先でそのメニューのツリーを展開したままにしたいのですが、できるでしょうか? たとえばmenu1内のaaa.htmlへのリンクをクリックした場合、menu1のツリーが展開したままaaa.htmlが表示されるというようなことがしたいです。 もしだめならタイトル部分の文字色を変えるだけでもいいので、今このメニューだというのがわかるようにしたいのです。 javascriptは本当に初心者なので、わかりにくい質問ですみません。 教えてもらえると助かります。

  • クッキーをオンにする方法がわからない

    ブラウザの cookie がオフになっています。cookie をオンにしてください。というメッセージが出てきました。どうすればよいでしょうか。

  • 開閉式ツリー型メニューについて

    こちらのサイトの↓ http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=tips_node 開閉式ツリー型メニュー(ロールオーバーあり)を参考にメニューを作ったのですが、 リンク先へ飛ぶと元の畳まれたメニューになってしまうのです。 クリックをしてメニューが開いた状態を保ちながら 次のページにも反映される様にするにはどうしたら良いでしょうか? ジャバもクッキーも調べてみたのですが、どうにも初心者の私には難しくて理解が困難でした; 誰かお願いいたします。

  • ツリーメニューについて

    フレームページで、JavaScriptで文字(下の場合は「親メニュー」)クリックすると 開閉するツリーメニューを使用したいと思っています(フレームあり・なしは訪問者の自由で選べるようにしています)。 http://himajin.moo.jp/menu/menu.html ここや、 http://www.openspc2.org/reibun/javascript/#8 こちらの05・06・63などを参考にして、 自分なりにシンプルに変更してみたのですが、記述に問題点などはありますでしょうか? 以下が、そのソースです(簡略化しています)。 <html> <head> <script type="text/JavaScript"> <!-- function treeMenu(tName) {  tMenu = document.getElementById(tName).style;  if(tMenu.display == 'none') tMenu.display = "block";  else tMenu.display = "none"; } //--> </script> </head> <body> <a href="JavaScript:treeMenu('treeMenu1')">親メニュー</a> <div id="treeMenu1" style="display:none">  <li><a href="a.html" target="main">子メニュー</a></li>  <li><a href="b.html" target="main">子メニュー</a></li> </body> </html> また、「document.all」はIE専用だと聞いたので「document.getElementById」 に変更してみたのですが、これでほかのブラウザでも問題は無く使用できますか? JavaScriptは初めてなのであまり自信がありません。 IEとFirefoxでは動作確認済みです。よろしくお願いします。

  • JavaScriptを利用しツリーメニューを作成していますが、

    JavaScriptを利用しツリーメニューを作成していますが、 ページを飛んで戻ってくるとメニューが閉じてしまいます。 更新を押した場合も同じです。 それを開いた状態に保っておきたいのです。 ちなみにソースは、 <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> <HEAD> と最初に書いておいて、 ツリーメニューを表示させたいところに、 <A href="javaScript:treeMenu('treeMenu1')">○○○</a><br> <DIV id="treeMenu1" style="display:none">  ┣<A href="aaa.html">aaa</A><BR>  ┣<A href="bbb.html">bbb</A><BR>  ┗<A href="ccc.html">ccc</A><BR> </DIV> と書いてます。 どこをどのように変えればよいですか? よろしくお願いします。 また参考にさせて頂いたサイトも一緒に載せておきます。 http://javascript.eweb-design.com/0703_tm.html

  • ツリーメニュータグに関して

    ツリーメニューに関して質問です。 最初の表示は ・メニュー ・メニュー(2) で、それぞれをクリックすると、 ・メニュー  ├1-1  ├1-2  └1-3 ・メニュー(2)  ├2-1  ├2-2  └2-3 と表示させたくて、タグ配布サイト様からツリーメニュータグをお借りし作成しました。 するとツリーの表示は問題ないんですが、ツリーメニュー配置場所以下にページがスクロールしなくなってしまいました。 上から50行目くらいに設置したツリーメニューより下にあと10行ほど文章があるのに、ツリーメニューが画面最下部に表示される位置までスクロールしたら、その下にはスクロールできない状態です。 説明下手ですみません。 配布サイト様に直接質問させていただこうと思ったのですが、そのサイト様は個人からの質問メールには答えないとあったので、こちらで質問させていただきます。 以下使用タグです。 <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> <span onclick="expand(sample);" style="cursor:hand;">・メニュー</span> <div id="sample" style="display:none"> ├1-1<br> ├1-2<br> └1-3</div> <span onclick="expand(sample2);" style="cursor:hand;">・メニュー(2)</span> <div id="sample2" style="display:none"> ├2-1<br> ├2-2<br> └2-3</div> 他にツリーメニューを表示させることのできるタグがあることは知っていますが、調べたサイトの中で上記がいちばん短いタグだったので、使用したいなと思いました。 もしどこかを直せば正常に表示されるのであれば、お教えいただければ幸いです。

  • ツリーメニューについて

    Java Scriptのあいうえおを学んでいる最中の超初心者です。 以下のツリーメニューを作成しています。 親メニュー(画像2枚)クリックしたらon画像⇒子メニュー(テキスト)表示。 また親メニュークリックしたらoff⇒子メニュー非表示。 しかし、私が作ったツリーメニューはデフォルト(html)で強制的に開いているためか、メニューを3回ぐらいクリックしないと閉じません。手っ取り早い処置を望んでいます。ソースは以下のとおりです。 【htmlソース】 <table border="0"> <tr><td><a href="javascript:localMenu('localMenu02');"><img src="imgs/on.gif" name="localMenu02Icon"></a></td></tr> <tr><td id="localMenu02" style="display:block;"> <table border="0"> <tr><td><img src="imgs/a.gif" broder="0"><a href="a.html">ABC</a></td></tr></table></td></tr></table> 【Java Scriptソース】 function localMenu(lyName){ if(!document.getElementById){return;} if(loadFlag != 'true'){return;} if(lMenuStockID == lyName){ document.getElementById(lyName).style.display = 'none'; document.images[lMenuStockID + 'Icon'].src = document.images[lMenuStockID + 'Icon'].src.replace('_on.','_of.'); lMenuStockID = 'noData'; return; }else if(lMenuStockID != 'noData'){ document.getElementById(lMenuStockID).style.display = 'none'; document.images[lMenuStockID + 'Icon'].src = document.images[lMenuStockID + 'Icon'].src.replace('_on.','_of.'); lMenuStockID = 'noData'; } document.getElementById(lyName).style.display = 'block'; document.images[lyName + 'Icon'].src = document.images[lyName + 'Icon'].src.replace('_of.','_on.'); lMenuStockID = lyName; } 上記のソースにデフォルトでオープンしてるかしてないかのフラグを追加しなければならないのですがフラグの書き方がわかりません。 勉強不足は十分に承知です。お時間がある方、フラグを教えていただけませんでしょうか?何卒よろしくお願いいたします。