- ベストアンサー
アコーディオン自動開閉メニューjavascript
タイトルの通りjavascriptでアコーディオンを作りたいのでご質問です。 マウスオーバー時にメニューを設定した秒数の間スムーズに自動開閉する記述が知りたいので ご教唆お願いします。
- chapital2005
- お礼率66% (16/24)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
とりあえず原理のみ。 きっかけはマウスオーバーとのことなので、対象となる要素にイベントをセットすればよいですが、個々にセットするよりも上位要素に1個だけセットしておく方がいろいろと都合がよろしいかと思います。 自動開閉は（多分縦に開閉でよいのだろうと推測しましたが）、対象とする要素をoverflow:hiddenなどに設定しておいて、そのheightを順次変化させるアニメーションを行なうことで可能になります。（横とかその他でも原理は同じです） ＞「設定した秒数の間スムーズに自動開閉」 の意味がわかりかねますが、表示したのち一定時間後に自動的にクローズという意味と解釈すれば、上記のアニメーション（表示）が終わったところでsetTimeoutなどを利用して、再度アニメーションでクローズさせるという手順でよろしいかと。 内容がよくわからないので、上記の原理の部分の原型サンプルを以下に。 （とりあえず原理なので、1階層限定で考えてあります） CSSも必要以外は設定してありません。 動作や仕様が違うところは適当にアレンジしてください。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #navi ul { overflow:hidden; zoom:1; } #navi ul.hide { display:none; } //--> </style> <script type="text/javascript"> <!-- function disp(evt){ var speed = 20; // スライド速度 var interval = 2000; // 開いている時間 var t = evt.target || evt.srcElement; var p = t.parentNode; if(t.nodeName!="LI" || p.id!="navi") return; var u = t.getElementsByTagName("ul")[0]; if(u && u.className=="hide"){ u.className = ""; var h = u.clientHeight; u.style.height = "0px"; slide(u, 0, h, function(){ setTimeout(function(){ slide(u, h, 0, function(){ u.className = "hide"; u.style.height = h + "px"; }) }, interval); }); } function slide(u, h, end, func){ var dir = h>end?-2:2; var id = setInterval(function(){ h += dir; if((dir>0 && h>end) || (0>dir && end>h)) h = end; u.style.height = h + "px"; if(h==end){ clearInterval(id); func(); } }, speed); } } //--> </script> </head> <body> <ul id="navi" onmouseover="disp(event)"> <li>menu1 <ul class="hide"> <li>sub_menu1-1</li> <li>sub_menu1-2</li> <li>sub_menu1-3</li> </ul> </li> <li>menu2 <ul class="hide"> <li>sub_menu2-1</li> <li>sub_menu2-2</li> <li>sub_menu2-3</li> </ul> </li> </ul> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＞親・子要素のhover時にアコーディオンを閉じない（hoverを外れるとinterval ＞やsetTimeoutが作動）ように調整するにはどのようにすればよいのでしょうか？ 質問の意味がよくわかりませんけど… それって、もしかして普通のマウスオンタイプのメニューの開閉のことでしょうか？ もしそうなら、自動で閉じるようなことはせずに、マウスがはずれたら閉じるようにするだけでよいのではないでしょうか？ それならごく普通にあるメニューの動作なので、探せばたくさんサンプルやライブラリが見つかることと思います。 原理的には、#1と同じようなことを行なっているはずと思います。 （実装はいろいろでしょうけれど）
お礼
回答ありがとうございます。 質問の意図をくみ取っていただき、sampleまで！ ありがとうございます。 またまたの質問で恐縮ですが、親・子要素のhover時にアコーディオンを閉じない（hoverを外れるとintervalやsetTimeoutが作動）ように調整するにはどのようにすればよいのでしょうか？