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

解決済

質問者：hoguhogu2
質問日時：2012/01/04 09:12
回答数：2件

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

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

通報する

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

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： my--
回答日時：2012/01/04 15:20

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

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