JQuery　スライドダウンがしません

初めまして
まだ経験が浅い者ですが

今回、JQueryを使用して
ハンバーガーメニューをクリックすると
メニューがスライドダウンするモノを作成使用したいということで
作業をしていたのですが
ハンバーガーメニューをクリックしても一切反応がない状態です。

最初はjqueryの読み込みができていないのでは？と、思い
試しに”ここの文字色が変わります”で色を赤くしたところ
こちらは大丈夫でしたので読み込み自体はできているのかと。。。

ただ、そこから先が分からなくなってしまいました。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>
<script>
</script>
</head>
<body>
<header>
  <div class="icon-hamburger"><span></span></div>
<nav class="menu-container">
  <ul class="menu">
    <li class="menu-item"><a href="#">ホーム</a></li>
    <li class="menu-item"><a href="#">ページ A</a></li>
    <li class="menu-item"><a href="#">ページ B</a></li>
    <li class="menu-item"><a href="#">ページ C</a></li>
    <li class="menu-item"><a href="#">ページ D</a></li>
    <li class="menu-item"><a href="#">ページ E</a></li>
  </ul>
</nav>
</header>
<div id="js-target">ここの文字色が変わります</div>
</body>
</html>

CSS

.icon-hamburger {
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  height: 50px;
  position: relative;
  width: 50px;
  display: none;
}

.icon-hamburger span {
  background: #cccccc;
  display: block;
  height:8px;
  position: absolute;
  left:25px;
  top: 25px;
  margin: -8% 0 0 -42%;
  width:40px;
}

.icon-hamburger span::before,
.icon-hamburger span::after {
  background: #cccccc;
  content: "";
  display: block;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  width:100%;
}

.icon-hamburger span::before {
  margin-top:-12px;
}

.icon-hamburger span::after {
  margin-top:12px;
}
.menu-container {
  margin: 0;
}

.menu-container .menu {
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container .menu .menu-item {
  flex: 1;
}

.menu-container .menu .menu-item a {
  background: #fff;
  border-right: 1px solid #ccc;
  color: #333;
  display: block;
  padding: 0.6em 0.4em;
  text-align: center;
  text-decoration: none;
}

.menu-container .menu .menu-item a:hover {
  background: #ccc;
  color: #ffffff;
}

.menu-container .menu .menu-item:last-child a {
  border-right: none;
}


@media screen and (max-width: 768px) {
  .icon-hamburger {
    display: inline-block;
  }

    .menu-container .menu {
      display: none;
      width: 100%;
    }
    .menu-container .menu .menu-item a {
      border-bottom: 1px solid #ccc;
      border-right: none;
    }
    .menu-container .menu .menu-item:last-child a {
      border-bottom: none;
    }

}

js

$('.icon-hamburger').on('click', function() {
  if($('.menu-container .menu').css('display') === 'block') {
    $('.menu-container .menu').slideUp('1500');
  }else {
    $('.menu-container .menu').slideDown('1500');
  }
});$(function(){
  console.log('read jQuery File!');
  $('#js-target').css('color', '#ff0000');
});

わかる方がいましたら
宜しくお願い致します。

回答1件

ベストアンサー

下記一式を

js
1$('.icon-hamburger').on('click', function() {
2  if($('.menu-container .menu').css('display') === 'block') {
3    $('.menu-container .menu').slideUp('1500');
4  }else {
5    $('.menu-container .menu').slideDown('1500');
6  }
7});

下記の中に入れると良いです。(手元で動作確認しました)

$(function(){

 //この中

});

理由：
表現が正しいか分かりませんが、.on()によるイベントは登録式で、
当該処理を読み込んだ時に存在する要素がなければそのイベントは登録されません。
今回の.jsファイルの位置ですと、.on()を通るときにHTMLはまだhead内の読み込みのみなので、body内にある.icon-hamburgerは読み込まれていないことになります。

$(function(){ });は「ドキュメントが全て読み込まれた後に実行」されるものですので、一応、どの位置にあってもHTML全て読み込んだ後に実行されます。

様々な記事で「<script>の記述やjsファイルの読み込み記述を</body>の前に置く」ことが推奨されているのは、ドキュメントが確実に読み込まれてからJavaScriptにいくようにするためだったりします。
JavaScriptは「イベント駆動」で「操作する対象」がイベント登録時に存在しなければ何もできませんので・・

投稿2019/07/03 00:23