jQueryでメニューのサブメニュー(ドロップダウン)をクリックで開閉させる方法

以前にCSSでドロップダウンメニューを作成しました。

CSSではマウスオーバーでしか動的なことは出来ないため、マウスオーバーで開閉するようなものでした。

CSSの擬似クラス(hover)でメニューにドロップダウンを可能な限り簡単に追加する

今回はjQueryを使ってメニューをクリックするとドロップダウンメニューが開閉するように作ってみようと思います。

クリックで開閉させるサンプルコード

HTML

上の画像の赤い部分のメニューから出てくるプルダウンのサブメニューをクリックで開閉できるようにします。

CSS

以前作成したもののメニュー部分だけを抜き出しました。

これに対しjQueryはこれだけです。

これで親メニューをクリックしたらサブメニューが開閉します。

ただ、これだけでは微妙です。

一度開いたサブメニューは親を再度クリックしないと消えないのです。

ロストフォーカスでサブメニューが閉じるようにしたいですよね？

ロストフォーカスで閉じるメニュー

• クリックするとサブメニューが開く
• 再度クリックするか、親メニューもしくはサブメニューからロストフォーカスしたときに閉じる

これがうまく出来るように色々調べてたらきれいに僕の想像通りに作成している人を見つけました。

丸投げみたいで申し訳ないですが、そちらのサイトを見たほうが早いと思いますのでリンクを貼っておきます。

近いところまではいったんですかね。

$(btn).bind(“click”, “focus”, function(event){

bind() を使っていますね。

bind() は同じようなもので on() というのもあります。

こちらは、複数のイベントを追加したい場合に使います。