jQuery多層式アコーディオンメニューについて。

締切済

質問者：rhtk7123
質問日時：2013/05/15 20:37
回答数：2件

javascript勉強中です。

jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。
これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8. …
<script type="text/javascript">
$(function(){
$('ul.main li').hover(function(){
$('>ul:not(:animated)',this).slideDown('fast')
},function(){
$('>ul',this).slideUp('fast');
});
});
</script>
<style>
ul.sub,
ul.sub ul.sub{display:none;}
</style>
</head>
<body>
<ul class="main clearfix">
<li><a href="#">メニュー1</a>
<ul class="sub">
<li><a href="#">サブ1-1</a>
<ul class="sub">
<li><a href="#">サブ1A-1</a></li>
</ul>
</li>
<li><a href="#">サブ1-2</a></li>
</ul>
</li>
<li><a href="#">メニュー2</a>
<ul class="sub">
<li><a href="#">サブ1-1</a>
<ul class="sub">
<li><a href="#">サブ1A-1</a></li>
</ul>
</li>
<li><a href="#">サブ1-2</a></li>
</ul>
</li>
</ul>
</body>
</html>

何卒宜しくお願い申し上げます。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2013/05/15 22:36

A No1です。

　連投失礼。

＞3）子要素をクリックしたら、自分（と兄弟要素）を閉じる
は、多階層の場合には、その要素自身が孫要素を持たない場合は「閉じる」で良いですが、孫要素がある場合は「それを開く」と「自分を閉じる」の判別が付かないので無理がありましたね。
このケースは無視してください。

あと、多階層で閉じる際の処理として、その子要素のみを閉じるのか子孫要素を全て閉じるのかで、次に開いた時の見え方が変わるというのもあります。
前者だと以前の状態が保持されていますし、後者だと開いたときは必ずその子要素のみが見える状態になります。

- 0
- 件

通報する

この回答へのお礼

お返事遅れて申し訳ございません。
ありがとうございます、頑張ってみます！

通報する

お礼日時：2013/05/17 14:36

No.1

回答者： fujillin
回答日時：2013/05/15 22:24

お勉強中とのことですので、考え方のヒントを…

＞これをclickすることで開くようにするにはどうしたらいいか
処理のきっかけをhoverからclickにすればよいのですから、hoverの部分を修正すればよろしいでしょう。
ただし、hoverでは開/閉両方の動作を指定していますが、これは基本的には
element.mouseover(function(){～～}).mouseout(function(){～～});
と同じような意味になっていますので、click時に開く動作のみ記述することになります。
この結果、ご質問文とおりに「クリック時に開く」が実現できるはずです。

ご質問文からは、どのようにしたときに閉じるようにしたいのか不明ですが、例えば
　1）一定時間後に自動的に閉じる
　2）同じ要素をクリックしたら、閉じる
　3）子要素をクリックしたら、自分（と兄弟要素）を閉じる
などが考えられますが、それぞれに応じた処理を上記に加えて記述すればよいでしょう。

また、ご質問文の例でも記述なさっているように、アニメーション中に次のイベントが発生した場合にどうするかについても考慮しておいた方が良いですね。
（ご提示の例の場合は、このようなことが発生するのはまれであろうとは思いますが…）
　1）イベント（クリック動作など）を無視する
　2）アニメーションを中断し、イベント処理を実行する
　3）イベントのキューに一旦いれ、アニメーション終了後、次のアニメーションを実行する
などが、考えられます。