展開/縮回菜單欄

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"); 
}); 

如果可能的話，你應該總是通過CSS改變CSS，而不是使用JavaScript 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; 
}