dポイントプレゼントキャンペーン実施中！

アコーディオン自動開閉メニューjavascript

解決済

  • 質問者：chapital2005
  • 質問日時：
  • 回答数：2件

タイトルの通りjavascriptでアコーディオンを作りたいのでご質問です。
マウスオーバー時にメニューを設定した秒数の間スムーズに自動開閉する記述が知りたいので
ご教唆お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

とりあえず原理のみ。


きっかけはマウスオーバーとのことなので、対象となる要素にイベントをセットすればよいですが、個々にセットするよりも上位要素に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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
質問の意図をくみ取っていただき、sampleまで！
ありがとうございます。

またまたの質問で恐縮ですが、親・子要素のhover時にアコーディオンを閉じない（hoverを外れるとintervalやsetTimeoutが作動）ように調整するにはどのようにすればよいのでしょうか？

通報する
お礼日時：2011/08/22 18:21

No.2

  • 回答者： fujillin
  • 回答日時：

#1です。



＞親・子要素のhover時にアコーディオンを閉じない（hoverを外れるとinterval
＞やsetTimeoutが作動）ように調整するにはどのようにすればよいのでしょうか？
質問の意味がよくわかりませんけど…
それって、もしかして普通のマウスオンタイプのメニューの開閉のことでしょうか？

もしそうなら、自動で閉じるようなことはせずに、マウスがはずれたら閉じるようにするだけでよいのではないでしょうか？
それならごく普通にあるメニューの動作なので、探せばたくさんサンプルやライブラリが見つかることと思います。


原理的には、#1と同じようなことを行なっているはずと思います。
（実装はいろいろでしょうけれど）
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報