ID變化的jQuery動畫

Question

我試圖用animate（）創建切換樣式菜單。菜單顯示，但不會再隱藏。這是小提琴。

http://jsfiddle.net/eenpK/2/

$("#menu2").on("click", function(){ 
$("#menu").animate({width: "200px"}); 
$("#menu2").attr("id", "menu2b"); 
}); 

$("#menub").on("click", function(){ 
$("#menu").animate({width: "-200px"}).css("overflow", "visible"); 
}); 

Answer 1

既然你改變元素id，語法$(element).on("click","sub-element",function())會工作。

當您點擊#menu2b時，您並未改變id。

嘗試：

$(document).on("click", "#menu2", function() { 
    $("#menu").animate({ 
     width: "200px" 
    }); 
    $("#menu2").attr("id", "menu2b"); 
}); 

$(document).on("click", "#menu2b", function() { 
    $("#menu").animate({ 
     width: "-200px" 
    }).css("overflow", "visible"); 
    $("#menu2b").attr("id", "menu2"); 
}); 

Updated fiddle here.

Answer 2

元id S的關係一般不會改變，並且切換是不是一個很好的理由這樣做。我會做這樣的事情，而不是：

http://jsfiddle.net/j2a4D/

$("#menu2").on("click", function() { 
    if ($(this).is('.expanded')) { 
     $("#menu").animate({ 
      width: "-200px" 
     }).css("overflow", "visible"); 
    } else { 
     $("#menu").animate({ 
      width: "200px" 
     }); 
    } 
    $("#menu2").toggleClass('expanded'); 
}); 

爲了完整起見，你的小提琴是行不通的原因有二：#menub = #menu2b，並且要綁定處理程序元素和期待改變那些元素來改變哪些處理程序綁定到它們（這不會發生）。