Question

我正在尝试制作一个滑出菜单，其中有一个按钮可以滑入/滑出“打开”类别。

当点击打开按钮时，jQuery会执行幻灯片并添加“关闭”类并删除“打开”类 - 这样可以正常工作。

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

但是关闭不起作用，它添加了close类，但close函数不能单击，也许你不能在已经添加的类上有函数？？

任何帮助都非常感激。

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

jQuery单击滑动，单击slideOut，addclass不起作用？

2 个答案: