今、クリックで開閉するプルダウンメニューを以下のように作っているのですが
【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サイトのメニューバーの開閉みたいに、メニューバー以外の場所をクリックしたら
表示されているメニューのカテゴリーが閉じる動作にしたいです。
No.1ベストアンサー
- 回答日時:
$(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
- 回答日時:
いろんな書き方がありますね。
http://jsfiddle.net/zAPJn/
バブリングを利用するところは #1 の方のコードと同じです。
http://d.hatena.ne.jp/tetsuya_odaka/20090713/124 …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP SQLとPHPの連結方法がわからないのでアドバイスお願い致します 1 2022/07/12 12:16
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bt_melter.jsをサイトの一部の...
-
配列の大括弧と丸括弧はどう違う?
-
javascriptでCSVを呼出しvlookup
-
「nullまたはオブジェクトでは...
-
【Tabキー】特定の範囲内だけで...
-
javascriptであるボタンを押す...
-
javascript 特定のタグのidの存...
-
class名で選択できるようにした...
-
任意の座標をクリックさせるには
-
関数でy=g(x)のgとは何の略です...
-
C#テキストボックスの文字を配...
-
同じIDで定義した要素の配列を...
-
アクセス時からのカウントダウ...
-
二次元配列を使って順位をだす...
-
pdfに丸秘などのスタンプを...
-
javaScriptのコードの修正をお...
-
ASP+アクセスでのSQLコメントに...
-
JavaScript window.openで開く...
-
C#OpenCv V4にのエラーに関する...
-
gas スプレッドシートがアクテ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
ActiveXobjectが作成できない
-
onchangeイベントを使ってspan...
-
HTML:Tableタグに対し、JavaScr...
-
任意の座標をクリックさせるには
-
モーダルダイアログウィンドウ...
-
Click回数を数え、規定された回...
-
innerHTML実行後のイベント
-
javascript 特定のタグのidの存...
-
[初心者]javascriptのfor文でな...
-
【Tabキー】特定の範囲内だけで...
-
javascriptでスロットゲームを...
-
JavaScriptとcookieを利用して...
-
画像の一部を表示
-
日本語入力の禁止
-
javascriptで、表示されている...
-
javascriptで編集可能不可能の...
-
DIV内のDIV要素を移動する。
-
javascript の 命令文の記述で...
-
重複しないくじの作り方がわか...
おすすめ情報