こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

【jQuery】クリックで開閉するメニュー

今、クリックで開閉するプルダウンメニューを以下のように作っているのですが

【HTML】
<div class="menu">メニュー</div>

<div class="a">
<p>カテゴリー1</p>
<p>カテゴリー2</p>
</div>


【jQuery】
$(".menu").click(function(e){
if($(".a").css("display") == "none"){
$(".a").show();
}else{
$(".a").hide();
}
});


".munu"の要素をクリックした場合、メニューの".a"の要素が開き
もう一度".munu"の要素をクリックすると、メニューの".a"の要素が閉じます。

基本的な動作はこれでいいのですが
".munu"や".a"の要素以外の場所をクリックしたら
".a"を閉じるようにしたいのですが、どのようにすればいいのでしょうか?

OKWaveサイトのメニューバーの開閉みたいに、メニューバー以外の場所をクリックしたら
表示されているメニューのカテゴリーが閉じる動作にしたいです。

投稿日時 - 2012-01-04 09:12:47

QNo.7224160

困ってます

質問者が選んだベストアンサー

$(document).on('click', '*', function (e) {
var target = e.target;
var a = $('div.a');
if ($(target).parents('div.menu, div.a')[0] // targetが div.menu, div.a どちらかの子孫
|| target === $('div.menu')[0] // target が div.menu
|| target === a[0]) // target が div.a
return; // いずれかの条件に一致すれば処理を終了

a.hide();
});


documentで監視してみた一例です。第二引数にセレクタを置いてますが、省略してもかまいません。
clickイベントならdocumentですべての要素を補足できますから、event.targetプロパティの扱いにも慣れておくと良いと思います。.on()はバージョン1.7から使えます。

1.7以前のバージョンでは.delegate()を使って下さい。


$(document).delegate('*', 'click', function (e) {
...
});


引数の位置関係に注意と、こちらはセレクタの省略ができません。

投稿日時 - 2012-01-04 15:20:12

お礼

使用していたjQueryのバージョンでは.on()は使えませんでしたが、.delegate()で希望どうり開閉するプルダウンメニューが作れました。
ありがとうございました。

投稿日時 - 2012-01-05 08:05:36

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

いろんな書き方がありますね。
http://jsfiddle.net/zAPJn/
バブリングを利用するところは #1 の方のコードと同じです。
http://d.hatena.ne.jp/tetsuya_odaka/20090713/1247447276

投稿日時 - 2012-01-04 16:28:14

あなたにオススメの質問