Javascript：1つのクリックリスナーで2つの機能を切り替える

Question

このクールなアニメーションのバーガーメニューボタン（ "navicon1"）でサイドバーをコーディングしたいという問題があります。メニューボタンのクールなアニメーション効果は、「オープン」クラスで使用されます。メニューボタンをクリックすると "openNav"と "closeNav"の機能を切り替えることもできます。

だからこれは私が欲しいものです：

• 私はメニューボタン（navicon1）を初めてクリックした場合 - >メニュー - ボタンXへ 変更を（これは動作します）およびJavaScriptの機能を実行する「openNav」
• Iメニューボタン（navicon1に）第二の時間をクリックすると - >メニューボタンノーマル（これは動作します）。ここでjavascript関数 「closeNav」

を実行する 変更は私のコードです：

$(document).ready(function() { 

     $('#navicon1,#navicon2,#navicon3,#navicon4').click(function() { 
      $(this).toggleClass('open'); 

     }); 
    }); 
    /* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */ 
    function openNav() { 

     document.getElementById("mySidenav").style.width = "75%"; 
     document.getElementById("main").style.marginLeft = "75%"; 
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; 

     } 

     /* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */ 
    function closeNav() { 

     document.getElementById("mySidenav").style.width = "0"; 
     document.getElementById("main").style.marginLeft = "0"; 
     document.body.style.backgroundColor = "white"; 
     check = 0; 
     } 

あなたはnavicon2-3を無視することができ、彼らは

はあなたの助けをありがとう:)

Answer 1

を状態を記憶する変数を使用して...唯一のCSSのです：

var navOpen = false; 
$("#navicon1").click(function() { 
    if (navOpen) { 
     closeNav(); 
     navOpen = false; 
    } else { 
     openNav(); 
     navOpen = true; 
    } 
}); 

Answer 2

toggleClass()を扱う1つの関数を作成し、その状態に基づいて他の関数を呼び出すことをお勧めします。

$('#navicon1').click(function() { 
    $(this).toggleClass('open'); 

    //if hasClass() then call function to open it 

    //else call function to close it 

});