メニューバーの拡大/縮小

Question

jQueryを使用して、メニューバーを画面の左側から拡大/縮小しています。メニューバーが拡大したが、戻って後退されていない

$(document).ready(function(){ 
    $('.menu-button').on("click", 
    function(){ 
     $('.menu').css("left","0"); 
     $('.menu-button').addClass("clicked"); 
    } 
); 

    $('.menu-button clicked').on("click", 
    function(){ 
     $('.menu').css("left","-168"); 
     $('.menu-button').removeClass("clicked"); 
    } 
); 

}); 

：

は、ここで私がこれまで持っているものです。私はこのコードが理にかなっていると思いますが、明らかにそうではありません。思考？

Answer 1

あなたは

$('.menu-button.clicked') 

に

$('.menu-button clicked') 

を変更する必要がある。しかし、問題は、あなたがもう一度クリックしたときです。両方のクリックが発生します。クラスを追加して削除します。あなたは

$(document).ready(function(){ 
    $('.menu-button').on("click", function(){ 
     if($('.menu-button').hasClass('clicked')) { 
      $(this).removeClass("clicked"); 
      $('.menu').css("left","-168"); 
     } else { 
      $(this).addClass("clicked"); 
      $('.menu').css("left","0"); 
     } 
    }); 
}); 

ような何かを行うことができることを修正するには、しかし、最も簡単なので同じようtoggleClassを使用することです：

$('.menu-button').on("click", function(){ 
    $('.menu').toggleClass("clicked"); 
    $(this).toggleClass("clicked"); 
}); 

し、可能な場合は、必ずJavaScriptを使用してCSSを経由してCSSを変更してはなりませんinline-スタイル。.. .toggleClassでクラスを切り替え、あなたのCSSを変更します。ここに色付きの枠線を追加するだけでアイデアを得ることができますが、必要な時にスタイルを変更することができます。

.menu { 
    /* add your styles here */ 
    left: -168px; 
    border: solid 2px red; 
} 

.menu.clicked { 
    /* add your styles here */ 
    left: 0; 
    border: solid 2px green; 
} 

.menu-button { 
    /* add your styles here */ 
    border: solid 2px orange; 
} 

.menu-button.clicked { 
    /* add your styles here */ 
    border: solid 2px lime; 
}