ハンバーガーメニューの３本線がバツ印にならない

ハンバーガーメニューの３本線をクリックした時にバツ印にしたい

ここに質問の内容を詳しく書いてください。
ハンバーガーメニューをクリックした時にバツ印にしたいのですが、ならないです。
教えていただきたいです。

html
1コード<!DOCTYPE html>
2<html lang=ja>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>product site</title>
8    <link rel ="stylesheet" href="style.css">
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10  </head>
11  <body>
12    <!-- メニューバー -->
13    
14        <header class="header">
15          <div class="header-fixed">
16            <button type="button" id="js-buttonHamburger" class="c-button p-hamburger" aria-controls="global-nav" aria-expanded="false">
17              <span class="p-hamburger__line"></span>
18            </button>
19          </div>       
20          <div class="nav header-nav" id="nav">
21            <ul class="nav-list">    
22              <li class="nav-item"><a href="#">About Me</a></li>
23              <li class="nav-item"><a href="#">Skill</a></li>
24              <li class="nav-item"><a href="#">Works</a></li>
25              <li class="nav-item"><a href="#">Service</a></li>
26            </ul>  
27          </div>
28        </header>
29      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
30      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
31      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
32      <script src="main.js"></script>
33  </body>
34</html>

css
1*{
2  margin:0;
3  padding:0;
4  font-family:"Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN";
5}
6/* ヘッダー */
7.header {
8  background-color:black;
9  display: flex;
10  height: 94px;
11  position: fixed;
12  width:100%;
13 
14}
15.nav-list{
16  list-style: none;
17  margin-top: 30px;
18}
19.header-nav{
20  margin-left: auto;
21}
22.nav-item a{
23  text-decoration: none;
24  color:white;
25  margin-right:40px;
26}
27.c-button {
28  position: relative;
29  display: inline-block;
30  text-decoration: none;
31  -webkit-appearance: none;
32  -moz-appearance: none;
33  appearance: none;
34  border: none;
35  background-color: transparent; 
36}  
37.p-hamburger {
38  position: absolute;
39  top: 0;
40  bottom: 0;
41  right: 20px;
42  width: 80px;
43  height: 80px;
44  margin: auto;
45  outline: none;
46  padding: 0 1em;
47  box-shadow: 0 0 2rem transparent;
48  -webkit-transition: all .3s ease-in-out;
49          transition: all .3s ease-in-out;  
50}
51.p-hamburger__line {
52  position: absolute;
53  top: 0;
54  right: 0;
55  bottom: 0;
56  left: 0;
57  margin: auto;
58  width: 80%;
59  height:3px;
60  background-color: white;
61  -webkit-transition: inherit;
62          transition: inherit;
63}
64.p-hamburger__line::before,
65.p-hamburger__line::after {
66  position: absolute;
67  display: block;
68  width: 100%;
69  height: 100%;
70  background-color: inherit;
71  content: '';
72  -webkit-transition: inherit;
73          transition: inherit;
74}
75.p-hamburger__line::before {
76  top: -5px;
77}
78.p-hamburger__line::after {
79  top: 5px;
80}
81.p-hamburger[aria-expanded="true"] .p-hamburger__line {
82  background-color: transparent;
83}
84.p-hamburger[aria-expanded="true"] .p-hamburger__line::before,
85.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
86  top: 0;
87  background-color: white;
88} 
89.p-hamburger[aria-expanded="true"] .p-hamburger__line::before {
90  -webkit-transform: rotate(45deg);
91  -ms-transform: rotate(45deg); 
92          transform: rotate(45deg);
93}
94.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
95  -webkit-transform: rotate(-45deg);
96  -ms-transform: rotate(-45deg);        
97  transform: rotate(-45deg);
98} 
99.header-fixed{
100  z-index: 4;
101}
102.header-nav{
103  position: fixed;
104  top: -100%;
105  width: 100%;
106  height: 50%;  
107  font-size: 16px;
108  box-sizing: border-box;
109  z-index: 3;
110  padding-top: 50px;
111  transition: .3s;
112}
113.header-nav.open{
114  top: 0px;
115}
116.nav-list{
117  width: 100%;
118  height:100%;
119  display: flex;
120  flex-direction: column;
121  text-align: center;
122  margin: 0;
123  margin-top: 40px;
124  background-color: #000000CC;
125  
126  /*justify-content: center;*/
127}
128.nav-item{
129  display: block;
130  padding : 20px;
131}
132.nav-item a{
133  color: #ddd;
134  text-decoration: none;
135}

javascript
1$(function(){
2  $('#js-buttonHamburger').click(function () {
3    $('#nav').toggleClass('open');
4    $("#global-nav").slideToggle();
5      if ($('#js-buttonHamburger').attr('aria-expanded') == 'false') {
6        $('#js-buttonHamburger').attr('aria-expanded', true);
7      } else {
8        $('#js-buttonHamburger').attr('aria-expanded', false);
9      }
10    }); 
11});

よろしくお願い致します。

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

回答1件

ベストアンサー

jQueryをロードしていないからではないですか？
とりあえず以下を入れれば動くと思います。

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

投稿2021/05/23 01:51

編集2021/05/23 01:59

itagagaki

総合スコア8402

keko

2021/05/23 07:08

回答いただきありがとうございます。簡単なミスでした、、、、ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ハンバーガーメニューの３本線がバツ印にならない

ハンバーガーメニューの３本線をクリックした時にバツ印にしたい

関連した質問