今だけ人気マンガ100円レンタル特集♪

タイトルの通り、開いたツリーメニューからリンクを踏んで、またメニューのあるページに戻ってきた時にメニューを開いたままにしたいです。

色々と調べるうちにcookieを使うことはわかったのですが、どこもツリーメニューの方法が違うため載っているソースのどこを弄れば自分の使ったツリーメニューに対応させられるのかわかりませんでした。

javascriptを切った状態では開いたまま表示させたいので、ツリーメニューのソースは以下を参考にさせていただきました。
http://blog.ptlabo.net/index.php?id=06100064
これを利用して「戻ってきた時ツリーメニューを開いた状態に」することはできますか?

できない場合、
・cssオン、javascriptオフの状態では開いている
・ブラウザバックしたときに開いている
この条件に合うツリーメニューであれば何でも良いのでお教えいただきたいです。

初心者ですので詳細にご教授いただければ幸いです。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

要望を実現するためには、折りたたみのある項目すべて(もしくはどちらか一方をすべて)を保存する必要があります。


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

訂正します。


これまでの場合はツリーメニュー以外の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>
    • good
    • 0
この回答へのお礼

とても丁寧にありがとうございます!
無知故に苦労しましたが、お陰でなんとかやりたかったデザインに組み込むことができました。

重ねて質問なのですが、
>if(1) openTreeMenu2('a'); //1なら対象外は隠す。メニューの折りたたみに好みがあるみたいなので0か1を指定
↑この値を0の「対象外も隠さない」設定にしたあと、メニューを複数開く場合、クッキーの保存が最後に開いたもののみになるようですが(メニューAを開き、そのあとBも開く→飛んで戻ってくる→Bしか開いていない という状態です)、
「複数開いた」ことを保存させるようにする事はできますか?
(AもBも開いたら、AもBも開いたままにしておきたいです)

しつこく聞くようで申し訳ないのですが、ご回答いただければ幸いです。

お礼日時:2008/11/26 02:00

遅くなりました!なんとなくカレンダーを作るのにハマってました!


まじめに作ると長いね~。補足説明は、これが記憶にあるうちにね!
字下げするために全角スペースにしました。タブとかに置きかえして
使用のこと。スクリプトとスタイルシートは外部に。

<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>
    • good
    • 0

参考にした!っていうより


書いたプログラムを見せていただいたほうが早い。

「javascriptオフでも見れる」というのであれば
逆に考えて、スクリプトが実行できるなら、
読み込みが終わった時点でメニューを折りたためば?
    • good
    • 0
この回答へのお礼

引き続き回答ありがとうございます。
参考にした、というかそのまま当てはめただけなので…

<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の何がどうなっているのかもわからないもので、どこをどのように弄ればそのようにプログラムすることができるのか、よろしければ教えていただきたいです。

お礼日時:2008/11/23 04:10
    • good
    • 0
この回答へのお礼

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

お礼日時:2008/11/21 00:36

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qページ遷移時にアコーディオンメニューの開閉状態を保持する2

宜しくお願いします。

http://testbloom.sitemix.jp/shampoo/

上記に検証用のURLを記します。

カテゴリー1の中にある「今だから知りたいノンシリコンシャンプーのあれこれ!?」をクリックしてページを遷移した時にカテゴリー2の内容を全て閉じるようにしたいです。
(カテゴリー2をクリックすると全て折りたたまれる状態)
カテゴリー1に所属する内容はそのまま開いている状態を維持します。

出来ればCookieを使わずに実装したく思います。

お手数をおかけ致しますが教えて下さい。

Aベストアンサー

いずれにしろ、どこかに状態を識別できるデータを残しておく必要がありますが、方法はいろいろあるかと。


クライアント側で処理するなら
 ・クッキーを利用する …… (これは×との条件)
 ・DOM Storageを利用する
 ・URL(クエリ部などを利用)
などが考えられると思います。

でも、ご提示のサンプルではリンク先がみな個別のアドレスになっているようですので、URLそのものを識別用に使うことも可能ですね。

・・・って、よく見れば、『 URLと同じリンクにactiveクラスを設定する 』といったことをすでにやっているようですから、それがちゃんと動作しているのなら、そこで特定された要素の親カテゴリだけ表示するようにしてあげるのが手っ取り早いのではないでしょうか?


一方で、HTMLの出力元はみなphpのようですので(個別ファイルなのか一括対応なのかわかりませんが)、URLに応じてサーバ側で先にHTMLソースに設定(クラス設定などを利用)しておくといったやり方のほうがスマートかもしれませんね。

Qリンクの下線を消したいのに消せない(CSS)

自分でタグを入力して、XHTMLとCSSでサイトを作っているのですがどうしても解決できない問題があるので質問させていただきます。

サイトの各ページに飛ぶテキストリンクをページの上部に作っていて、そのリンクを

・通常時(a:link)は・・・・・・・・下線なし
・訪問後(a:visited)は・・・・・・・下線なし
・マウスオーバー時(a:hover)は・・・下線あり

というふうにしたいので、CSSに書いたのですがどの場合においても下線が表示されてしまいます。

CSSをどのように書き直せば、上記のように下線が表示されるのでしょうか教えてください。

XHTML:http://love.meganebu.com/~twilight/question/index.html

CSS:http://love.meganebu.com/~twilight/question/mainstyle.css

Aベストアンサー

このあたりのサイトが参考になるかと。
http://www.tagindex.com/stylesheet/link/text_decoration.html

Q「以降」ってその日も含めますか

10以上だったら10も含める。10未満だったら10は含めない。では10以降は10を含めるのでしょうか?含めないのでしょうか?例えば10日以降にお越しくださいという文があるとします。これは10日も含めるのか、もしくは11日目からのどちらをさしているんでしょうか?自分は10日も含めると思い、今までずっとそのような意味で使ってきましたが実際はどうなんでしょうか?辞書を引いてものってないので疑問に思ってしまいました。

Aベストアンサー

「以」がつけば、以上でも以降でもその時も含みます。

しかし!間違えている人もいるので、きちんと確認したほうがいいです。これって小学校の時に習い以後の教育で多々使われているんすが、小学校以後の勉強をちゃんとしていない人がそのまま勘違いしている場合があります。あ、今の「以後」も当然小学校の時のことも含まれています。

私もにた様な経験があります。美容師さんに「木曜以降でしたらいつでも」といわれたので、じゃあ木曜に。といったら「だから、木曜以降って!聞いてました?木曜は駄目なんですよぉ(怒)。と言われたことがあります。しつこく言いますが、念のため、確認したほうがいいですよ。

「以上以下」と「以外」の説明について他の方が質問していたので、ご覧ください。
http://oshiete1.goo.ne.jp/kotaeru.php3?qid=643134

Q「jQuery」アコーディオンメニューがうまく動きません

jQuery初心者です。
ホームページのサイドカラムにアコーディオンメニューを作ろうとしているのですが、
上手く動作しないためお力を貸していただけると助かります。


jQueryバージョン:2.1.3

■HTML
<ul>
<li class="oya"><a href="A.html">リンクA</a>
<ul class="kodomo">
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
</ul>
</li>
<li class="oya"><a href="B.html">リンクB</a>
<ul class="kodomo">
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
</ul>
</li>
</ul>


■希望する動き
普通のアコーディオンの動きで特殊なものでは無いと思うのですが、念のため。

・初期状態は<ul class="kodomo">が非表示。
・<li class="oya"><a href="A.html">リンクA</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
</ul>
・<li class="oya"><a href="B.html">リンクB</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
</ul>

.oyaである
<a href="A.html">リンクA</a><a href="B.html">リンクB</a>クリックの際の動きは下記のどちらでも構いません。
↓↓↓どちらでもいいです↓↓↓
「A.html、B.htmlに飛ぶ。同時にアコーディオンも開く」
「A.html、B.htmlには飛ばず、アコーディオンのみ開く」
※A.html、B.htmlにも同じアコーディオンナビゲーションを設置しています。

そもそもA.html、B.htmlリンクが邪魔なのかもしれませんが、CMSを使用しているため外すことができません。


【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});

※アコーディオンが開いた瞬間に閉じてしまいます。
ちなみに'li.oya a'→'li.oya'にすると.nextが効かなくなりアコーディオンが開かなくなります。


【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

※パターン1に「return false;」を追加しました。
アコーディオンを開閉できるようになりましたが、
ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>が効かなくなってしまいました。


[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});

※パターン3より「li.oya a」→「li.oya」
「.next」→「.find」に変更。
アコーディオンは開閉します。
ただ、ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>をクリックすると該当ページには飛ばず、アコーディオンが閉じてしまいます。

なんだか良くわからなくなってきてしまいました。
ちなみに他のJQuery記述はすべて削除の上、確認、
全体はjQuery(function(){ });で囲っています。

ごくごく初歩的な部分でつまづいているのだとは思いますが、
何卒賢者のお力を。

jQuery初心者です。
ホームページのサイドカラムにアコーディオンメニューを作ろうとしているのですが、
上手く動作しないためお力を貸していただけると助かります。


jQueryバージョン:2.1.3

■HTML
<ul>
<li class="oya"><a href="A.html">リンクA</a>
<ul class="kodomo">
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
</ul>
</li>
<li class="oya"><a href="B.html">リンクB</a>
<ul class="kodom...続きを読む

Aベストアンサー

パターン2に少し手を加えれば動きます。
'li.oya a'→'li.oya > a'

$(function(){
$('ul.kodomo').hide();
$('li.oya > a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

一つずつ解説します。

【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});
リンクが効いてしまうのでページ移動(=アコーディオンが開いた瞬間に閉じる)
対応にはタグの変更が必要(TARGET="_blank")を入れるなど。
※'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
next('ul.kodomo')が見つけられない

【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});
'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
アコーディオンの子要素のaタグにもクリックイベントが付加されていため。
※'li.oya a'→'li.oya > a'にすると「li.oyaの子のa」に限定されるので希望している動きになります。

[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});
これは'li.oya'のタグがクリックされた時(子孫の要素も含む)
'li.oya'の子孫から'ul.kodomo'を探し出し、slideToggleを行い、
return falseする(ページ移動をキャンセル)
という処理になっています。

パターン2に少し手を加えれば動きます。
'li.oya a'→'li.oya > a'

$(function(){
$('ul.kodomo').hide();
$('li.oya > a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

一つずつ解説します。

【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});
リンクが効いてしまうのでページ移動(=アコーディオンが開いた瞬間に閉じる)
対応...続きを読む


人気Q&Aランキング