私のハンバーガーメニューを働かせることができません

Question

私はここに助けが必要です。私は自分のウェブサイトのハンバーガーメニューを作ろうとしているが、わからない何らかの理由でうまくいかない。ここではHTML、CSSと私はcodepen.io:- https://codepen.io/TheUnrealisticProgrammer/pen/QvjvVW ここでのJavaScriptコードで記述されてきたJavaScriptコードです： -

$(document).ready(function(){ 
    $('Menu').click(function(){ 
    $(this).toggleClass('Trigger'); 
    }); 
    }); 

コードからは、最初のスパンバーが後に135度回転させてアニメーション化すべきです私はそれをクリックしますが、そうではありません。

Answer 1

1. 、
2. あなたはjQueryの（設定で追加）
3. $('Menu')を持っていない、これは他が言ったように、あなたがそうIDを選択していること$('#Menu')

する必要がありますjQueryのです

チェック作業例については、このリンクを、固定のjQuery、JSとCSS：

https://codepen.io/hdl881127/pen/wdKZVj

の

固定CSS：

#Menu{ 
    position:relative; 
    margin-top:20px; 
    margin-left:20px; 
    display:block; 
    height:50px; 
    cursor: pointer; 
    width:50px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .5s ease-in-out; 
    -moz-transition: .5s ease-in-out; 
    -o-transition: .5s ease-in-out; 
    transition: .5s ease-in-out; 
} 

#Menu span{ 
    position:absolute; 
    background:orange; 
    display:block; 
    height: 6px; 
    width: 100%; 
    border-radius:50px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .25s ease-in-out; 
    -moz-transition: .25s ease-in-out; 
    -o-transition: .25s ease-in-out; 
    transition: .25s ease-in-out; 
} 
#Menu span:nth-child(1){ 
    top:0px; 
} 
#Menu span:nth-child(2){ 
    top:18px; 
} 
#Menu span:nth-child(3){ 
    top:36px; 
} 

#Menu.Trigger span:nth-child(1){ 
    top: 18px; 
    -webkit-transform: rotate(135deg); 
    -moz-transform: rotate(135deg); 
    -o-transform: rotate(135deg); 
    transform: rotate(135deg); 
} 

#Menu.Trigger span:nth-child(2){ 
    top: 18px; 
    -webkit-transform: rotate(225deg); 
    -moz-transform: rotate(225deg); 
    -o-transform: rotate(225deg); 
    transform: rotate(225deg); 
} 

#Menu.Trigger span:nth-child(3){ 
    top: 18px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

Answer 2

使用する前にJqueryとJQuery UIを使用してください。そして$('Menu')メニューはタグではありませんが、あなたのコードペンごとにdivのIDです。それは$('#Menu')でなければなりません。

Answer 3

これらの手順を実行してください。

1. はあなたのコードのペンにJSのセクションで利用できる設定アイコン上
2. をクリックします。
3. jqueryリファレンス（https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js）を追加するには、ダイアログボックスの右下にある[別のリソースを追加]ボタンをクリックします。
4. JavaScriptで、$（ 'Menu'）を使用しています。これは実際にメニューと呼ばれるタグを検索しています。それを$（ '＃Menu'）に変更してください。 IDをターゲットに設定します。
5. これは完全に正常に動作します。あなたのCSSスタイルが壊れている