質問: バーガーメニューを閉じたいのですが、方法がわかりません。 単純にメニューの中に「閉じる」項目を作り、それを押したら閉じる仕組みです。 リンク先を'#'にしたのですが、メニューは閉じませんでした。 ご教示お願い致します。 ``` TOPページ 内容 内容 内容 内容 内容 閉じる ``` ``` ```
回答: いろいろコメントで確認はしていますが、失礼ながら、おそらく提示のコードをあまり理解せずに使われているように思われますので、ざっと気になった点とあくまで1案として回答します。 ちょっと細かいですが。 画像がどのようなものかわからないですが、動きを見た感じ「ハンバーガーメニュー」ではなく普通の「ドロップダウンメニュー」ではないでしょうか。 画像次第ですけど、「ハンバーガーメニュー」は確かメニューのボタンが横の三本線になっているもの、そのボタン自体のことを言ったような。 機能的には「ドロップダウンメニュー」かなと。 * 「閉じるを押す」イベント自体が書かれていない 提示のJavaScriptコードの「click」で指定されている処理が「クリック時の処理」ですが、 見たところclass="container"をクリックしたときとid="sp_navi_btn"をクリックしたときの処理しかありません。 containerの方はhtmlの提示がないためどうなっているかわかりませんが、コードを読んだ限りだと、sp_navi_btnクリック時にその次の要素をslideToggle()するように書かれていますね。 slideToggle()はslideDown/slideUpを切り替えるものdす。 ここでメニューの開閉が行われています。 * 冗長な処理がある 下記は結局同じことが繰り返し書いてあるだけのように思います。 1つだけで良いです。 ``` $(function(){ $(document).ready(function(){ ``` jQueryの基本 - $(document).ready > > 上記3つの書き方も同じ動作をします。HTMLの読み込みが終わった時点で //なにかしらの処理 が実行されます。 > > > * click直接よりonから呼び出したほうが良い jQuery 便利なonを使おう(on click) あと既に開閉の仕組みが組まれているので同じ物を使いまわしたいですよね。 jQueryでは複数の要素に対して同じイベントを拾うように書けます。 [JS]jQuery で複数の要素に同じ処理をする方法 上記を踏まえて、また「閉じる」をきちんと認識するためにhtmlにも若干変更を加えるとこんな感じになるかなと。 (あくまで1つのやり方です。これだけが唯一ではありません) ``` 閉じる ``` ``` $(function(){ $("#sp_navi_btn,.close").click(function () { $("#sp_navi_btn").next().slideToggle(); }); $('.container').click(function(){ $('.sp_navi').removeClass('sp_navi_li'); }); }); ``` *一応動作確認済みですが、想定通りのものと違う場合、参考に色々やってみてください。