ハンバーガーメニューが実行できない

Question

コーディングを練習しているのですが
ハンバーガーメニューが動きません
上がheadタグで下がjsです。
わかる方教えて下さい。

<meta charset="utf-8">
<title>無題ドキュメント</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/humburger.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
</head>

    <header>
      <div class="container pc">
          <ul>
                <li class="logo"><a href="#"><img src="image/logo.png"></a></li>
                <li><a href="#">6つのポイント</a></li>
                <li><a href="#">無料のワケ</a></li>
                <li><a href="#">実績</a></li>
                <li><a href="#">生産者のお声</a></li>
        </ul>
          <div class="btn">
				<a href="../contact.php?parameter=1">
					<div class="grn_btn">
						無料サンプル申し込み
					</div>
				</a>
			</div>
      </div>
        
     <div class="container sp">
        <img src="image/logo.png">
        <i class="fas fa-bars" id="hamburgar_icon" aria-hidden="true"></i>
         <div id="hamburgar_content">
            <img src="image/logo.png" class="logo">
             <ul>
                <li><a href="#">6つのポイント</a></li>
                <li><a href="#">無料のワケ</a></li>
                <li><a href="#">実績</a></li>
                <li><a href="#">生産者のお声</a></li>
             </ul>
             <div class="clear"></div>
             <div class="tel">
                <p>お電話でのお問い合わせ</p>
                 <a href="0120-870-441"><i class="fas fa-phone-alt"></i>0120-870-441</a>
                 <p>フリーダイヤル・24時間受付</p>
				<div class="grn_btn"><a>無料サンプルの申し込み</a></div>
             </div>
         </div>
    </div>
    </header>

.pc{
       display: none;
   }
   header .sp{
       padding: 10px 0;
       position: relative;
       display: block;
       width: 100%;
   }
   header .sp img{
       width: 30%;
   }
   #hamburgar_icon{
       position: absolute;
       top: 10px;
       right: 30px;
       font-size: 24px;
       color: #7b7b7b;
   }

// //スムーズスクロール
//   var icon = $("#hamburgar_icon");
//
//   $("#hamburgar_icon").on('click', function(){
//     console.log("aa");
//   });

  // alert("aafewfw");

  var flg = false;
  var btn = $('#hamburgar_icon');
  var menu = $('#hamburgar_content')

  btn.on('click', function() {
    if (!flg) {
      // スクロール禁止
      $(window).on('touchmove.noScroll', function(e) {
          e.preventDefault();
      });

      // メニューを表示
      menu.slideDown(function() {
        flg = true;
        btn.attr("class","fa fa-times");
      });

      $('a').on('click', function(){
        // スクロール禁止 解除
        $(window).off('.noScroll');

        // メニューを非表示
        menu.slideUp(function() {
            flg = false;
            btn.attr("class","fa fa-bars");
        });
      });
    } else{
      // スクロール禁止 解除
      $(window).off('.noScroll');

      // メニューを非表示
      menu.slideUp(function() {
          flg = false;
          btn.attr("class","fa fa-bars");
      });
    }
  });

Comments

[Lhankor_Mhy]

エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

[-millmill-]

実際のメニュー部分のソースを(html, css)を載せて頂かないと回答は難しいと思いますが、、、

[Lhankor_Mhy]

http://amino3.cc/landing/
動いているようですが……

[-millmill-]

#hamburgar_contentに対するスタイルが全くありませんが
メニュー部分のcssはこれで全部でしょうか?

Answer 1

$(function(){

//ここに現在のscriptを記載

});

これで動くと思いますが。。。^^;

最初は「メニュー表示」からであればいいですが
そうでなければ
<div id="hamburgar_content">
を何らかの方法で非表示にして下さい

Comments

[yui_23]

//ここに現在のscriptを記載
この中には何を書けば良いんですかね？

[-millmill-]

var flg = false;
var btn = $('#hamburgar_icon');
var menu = $('#hamburgar_content')

btn.on('click', function() {
if (!flg) {
// スクロール禁止
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});

// メニューを表示
menu.slideDown(function() {
flg = true;
btn.attr("class","fa fa-times");
});

$('a').on('click', function(){
// スクロール禁止 解除
$(window).off('.noScroll');

// メニューを非表示
menu.slideUp(function() {
flg = false;
btn.attr("class","fa fa-bars");
});
});
} else{
// スクロール禁止 解除
$(window).off('.noScroll');

// メニューを非表示
menu.slideUp(function() {
flg = false;
btn.attr("class","fa fa-bars");
});
}
});

上に提示されたスクリプトです^^