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

質問

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

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

<div class="a">
<p>カテゴリー１</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サイトのメニューバーの開閉みたいに、メニューバー以外の場所をクリックしたら
表示されているメニューのカテゴリーが閉じる動作にしたいです。

回答No.1

my-- · ベストアンサー

$(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) {
...
});

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

お礼

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

回答No.2

think49

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