jQuery Slide in 点击，slideOut 点击 addclass 不起作用？

Question

我正在尝试制作一个滑出菜单，其中包含一个用于滑入/滑出的按钮，分类为“打开”。

当单击打开按钮时，jQuery 会滑入并添加“关闭”类并删除“打开”类 - 这工作正常。

然后，当单击“关闭”时，我试图滑出，添加“打开”类并删除“关闭”类以将其恢复到原始状态。

但是关闭不起作用，它添加了关闭类但关闭功能在点击时不起作用，也许你不能在已添加的类上拥有功能......？

非常感谢任何帮助。

            $(".open").click(function(){
                $('.mainmenu').stop().animate({left: '0'}, 800);
                $( ".open" ).addClass( "close" );
                $( ".open" ).removeClass( "open" );
            });

            $(".close").click(function(){
                $('.mainmenu').stop().animate({left: '-180'}, 800);
                $( ".close" ).addClass( "open" );
                $( ".close" ).removeClass( "close" );
            });

Answer 1

$("body").on('click','.open', function(){
                $('.mainmenu').stop().animate({left: '0'}, 800);
      $( ".open" ).removeClass( "open" ).addClass( "close" );


            });


            $("body").on("click",".close", function(){
                $('.mainmenu').stop().animate({left: '-180'}, 800);
                $( ".close" ).addClass( "open" ).removeClass( "close" );

            });

更简单的方法，通过使用 on() 方法，用于页面加载中不存在的元素...小提琴：http://jsfiddle.net/urjsw5z1/2/

Answer 2

假设您的按钮在开始时具有“打开”类。您的 javascript 代码将为“open”类添加回调，并且不会对“close”类执行任何操作，因为还没有此类组件。解决方法是执行以下操作：

function open() {
    $('.mainmenu').stop().animate({left: '0'}, 800);
    $( ".open" ).addClass( "close" );
    $( ".open" ).removeClass( "open" );
    $(".close").click(function(){
        close();
    });
}

function close() {
    $('.mainmenu').stop().animate({left: '-180'}, 800);
    $( ".close" ).addClass( "open" );
    $( ".close" ).removeClass( "close" );
    $(".open").click(function(){
        open();
    });
}

$(".open").click(function(){
    open();
});

$(".close").click(function(){
    close();
});