質問: 'hamburger-nav-toggle-btn close') { /* ハンバーガーメニューを展開 */ $('.hamburger-nav-list').slideDown(); /* さらに、開閉ボタンのクラスから'close'を削除し、'open'を付与する */ $(this).removeClass("close").addClass("open"); } /* 開閉ボタンのクラスが'close'ではない場合 */ else { /* ハンバーガーメニューを収束 */ $('.hamburger-nav-list').slideUp(function() { /* メニューが収束したのち、開閉ボタンのクラスから'open'を削除し、'close'を付与する */ $('#hamburger-nav-toggle').removeClass("open").addClass("close"); }); } }); /* 開閉ボタンをクリックした時の動作はここまで */ /* ハンバーガーメニューのアンカーをクリックしたら以下の関数を実行 */ $('.hamburger-nav-list a').click(function() { /* 開いている必要はないので、ハンバーガーメニューを収束 */**__この部分です。__** $('.hamburger-nav-list').slideUp(function() { /* メニューが収束したのち、開閉ボタンのクラスから'open'を削除し、'close'を付与する */ $('#hamburger-nav-toggle').removeClass("open").addClass("close"); }); }); /* SmoothScroll(おまけ) */ // $('.hamburger-nav-list a').smoothScroll(); }); ``` どう書き換えれば対処できますでしょうか? ちなみに、hamburger-nav-listを、display: block;やdisplay: none; では、対処できませんでした。。。 Bootstrapは使用しておりません。 CSSは以下です。 ``` /*--------------------------------------------- Hamburger Navigation ---------------------------------------------*/ @media screen and (max-width: 480px) { button { display: block; } nav i { font-size: 30px; } .hamburger-nav-toggle-btn { margin: 1em; } .hamburger-nav-toggle-btn.close::before, .hamburger-nav-toggle-btn.open::before { font-family: 'FontAwesome'; } /* .hamburger-nav-toggle-btn.open::before { content: '\f00d'; } .hamburger-nav-toggle-btn.close::before { content: '\f0c9'; } */ .hamburger-nav-list { display: none; list-style: none; margin: 0; padding: 0; background: #543f32; } .hamburger-nav-list > li { border-bottom: 1px solid #eeeeee; } .hamburger-nav-list > li a { display: block; padding: 10px 1em; text-decoration: none; } } ```
回答: slideUpを動作させたくないのであれば、こんな感じとかどうでしょう。 ``` /* ハンバーガーメニューのアンカーをクリックしたら以下の関数を実行 */ $( '.hamburger-nav-list a' ).click( function() { if ( !window.matchMedia( '(max-width: 480px)' ).matches ) { /* 開いている必要はないので、ハンバーガーメニューを収束 */ $( '.hamburger-nav-list' ).slideUp( function() { /* メニューが収束したのち、開閉ボタンのクラスから'open'を削除し、'close'を付与する */ $( '#hamburger-nav-toggle' ).removeClass( 'open' ).addClass( 'close' ); } ); } } ); ``` 【Media Queries(メディアクエリ)とJavaScriptの連携について】 https://qiita.com/r_abe01/items/a3a2e94b5162d949037b#windowmatchmediaメソッドを使用して判定 【知ってた?JavaScriptでメディアクエリを利用するちょっとしたテクニック - WPJ】