レスポンシブの際に、jQueryを、PC表示とタブレットでは使用せず、スマホ表示の時だけ使用する方法。

以下のハンバーガーメニューのjQueryをホームページに搭載すると、jQueryがPC表示とタブレット表示の時まで動作して閉じてしまいます。

/* 開いている必要はないので、ハンバーガーメニューを収束 */
    $('.hamburger-nav-list').slideUp(function() {**__この部分です。__**

スマホ表示の時にだけ効かせたい場合はどうすればよろしいでしょうか？

ハンバーガーメニュー全部のjQueryは以下です。

/* Hamburger Navigation */

$(function() {

  /* 開閉ボタンをクリックしたら以下の関数を実行 */
  $('#hamburger-nav-toggle').click(function() {

    /* 開閉ボタンのクラスが'close'（閉じている状態）の場合 */
    if($('#hamburger-nav-toggle').attr("class") == '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;
	}
}

m.ts10806

2018/05/18 04:10

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

m.ts10806

2018/05/18 04:13 編集

「jQueryが効く」という表現だとやりたいことがいまひとつ伝わらないように思います。もう少し具体的に記載してください。提示コードとやろうとしていることが合いません。

m.ts10806

2018/05/18 04:23

CSSフレームワーク（Bootstrapなど）は使われていますでしょうか？使われているようでしたら名称とバージョンを追記してください。

m.ts10806

2018/05/18 04:32

フレームワークを使われていないとしたらCSSも提示されないと再現確認がとれませんので、よろしくお願いします。

kei344

2018/05/18 05:04

「スマホ表示の時」とは (max-width: 480px) の時、という事でしょうか。

identity0xx

2018/05/18 06:27

お返事遅れ申し訳ありません。そうです。(max-width: 480px)のときです。

行動規範の内容に同意します

回答1件

ベストアンサー

slideUpを動作させたくないのであれば、こんな感じとかどうでしょう。

JavaScript
1/* ハンバーガーメニューのアンカーをクリックしたら以下の関数を実行 */
2$( '.hamburger-nav-list a' ).click( function() {
3	if ( !window.matchMedia( '(max-width: 480px)' ).matches ) {
4		/* 開いている必要はないので、ハンバーガーメニューを収束 */
5		$( '.hamburger-nav-list' ).slideUp( function() {
6			/* メニューが収束したのち、開閉ボタンのクラスから'open'を削除し、'close'を付与する */
7			$( '#hamburger-nav-toggle' ).removeClass( 'open' ).addClass( 'close' );
8		} );
9	}
10} );