• 締切済み

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

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

みんなの回答

noname#84373
noname#84373
回答No.5

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

noname#84373
noname#84373
回答No.4

訂正します。 これまでの場合はツリーメニュー以外の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>

yayoi8-_-8
質問者

お礼

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

noname#84373
noname#84373
回答No.3

遅くなりました!なんとなくカレンダーを作るのにハマってました! まじめに作ると長いね~。補足説明は、これが記憶にあるうちにね! 字下げするために全角スペースにしました。タブとかに置きかえして 使用のこと。スクリプトとスタイルシートは外部に。 <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>

noname#84373
noname#84373
回答No.2

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

yayoi8-_-8
質問者

お礼

引き続き回答ありがとうございます。 参考にした、というかそのまま当てはめただけなので… <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の何がどうなっているのかもわからないもので、どこをどのように弄ればそのようにプログラムすることができるのか、よろしければ教えていただきたいです。

noname#84373
noname#84373
回答No.1
yayoi8-_-8
質問者

お礼

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

関連するQ&A

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

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

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

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

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

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

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

  • ツリーメニューの作成

    ツリーメニューの表示ができません。 記述は以下のとおりです (ヘッダー内) メタタグで標準スクリプト指定 <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ファイルで、ツリーメニューをつくったときには 正常に表示(クリックすると、ずらずらと出てくる)のに、今回同じソース(というのですか?)で記述してみたら、ダメでした。 「このページは表示できません」とかなります。

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

    フレームページで、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では動作確認済みです。よろしくお願いします。

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

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

  • JavaScriptとCSSを使ったプルダウンメニューの作り方

    下記のようなサイトの左メニューのように、 横にプルダウンメニューが出てくるようにしたいのですが、 http://journal.mycom.co.jp/top/column/index.html JavaScriptとCSSを使ってするやり方&ソース&サンプルを 教えて下さい。 それが書かれてあるURLを教えていただいてもかまいません。

  • DHTML ツリーメニュー * 教えてください!

    こんにちは。デザイナーなんですが、DHTMLツリーメニューを作っています。ウェブ上でソースを見つけて、いじくってみているんですが、上手くいきません。どなたかご存知でしたら、教えてください。 作ろうとしているメニューは メルシー3 ├メルシー3の特徴 ├メルシー3の仕組 ├メルシー3の償還例 └お申込メモ/運用レポート メルシー4 ├メルシー4の特徴 ├メルシー4の仕組 ├メルシー4の償還例 └お申込メモ/運用レポート 。。というかんじで、メルシー3、4をクリックすると、 詳細メニュがツリーメニューで見れるというものです。 *問題は*** ほかの項目をクリックすると開いていた項目が閉じるようにしたいのです。今のままだと、一度クリックして開けてしまうと、他の項目をクリックしても、開いたままになっています。 例えば、すべての項目が閉じている状態からはじめます。 メルシー3をクリックすると、ツリーメニューで次の断層のリンクが出てきます。メルシー4をクリックすると、今の状態ではメルシー3が開いたまま、メルシー4が開いてしまいます。 これをデフォルトで1つの項目しか開かないようにしたいのです。 スクリプトの現状は以下のようになっています。 <script type="text/javascript"><!-- if (document.getElementById) document.write('<style type="text/css"> .tree { display: none; }<'+'/style>'); function tree(id) { if (document.getElementById(id).style.display == "block") document.getElementById(id).style.display="none"; else document.getElementById(id).style.display="block"; parent.contents.open(id+".html","contents") } と定義して <tr> <td id="sub"> <a href="javascript:tree('contents/mercy3');" title="クリックでメニューが開閉します">メルシー3</a><br></td> </tr> <td> <div id="contents/mercy3" class="tree"> ├<a href="#" target="contents">メルシー3の特徴 </a><br> ├<a href="未設定" target="contents">メルシー3の仕組 </a><br> ├<a href="未設定" target="contents">メルシー3の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> <tr> <td id="sub"> <a href="javascript:tree('contents/mercy4');" title="クリックでメニューが開閉します">メルシー4</a><br></td> </tr> <tr> <td> <div id="contents/mercy4" class="tree"> ├<a href="#" target="contents">メルシー4の特徴 </a><br> ├<a href="未設定" target="contents">メルシー4の仕組 </a><br> ├<a href="未設定" target="contents">メルシー4の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> とボディーで記述しています。 どなたか、ご存知でしたら、よろしくお願いいたします。

専門家に質問してみよう