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

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

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

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

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

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

HTML

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

CSS

メニュー部分のCSSです。

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

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

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

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

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

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

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

こんな感じかな?ってやってみたのですが・・・うまくいきません!

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

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

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

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

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

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

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

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

 

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA