Question

我正在尝试使用animate（）创建一个切换样式菜单。菜单显示但不会再次隐藏。这是小提琴。

$("#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())将起作用。

单击id时，您不会更改#menu2b。

尝试：

$(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通常不会改变，切换不是一个很好的理由。我会做这样的事情：

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，你是绑定元素的处理程序，并期望更改这些元素以改变哪些处理程序是绑定到他们（这不会发生）。

jQuery动画更改ID

2 个答案: