1

我一直试图让侧边栏根据点击向左和向右滑动。

我确实尝试过切换无法让它工作。

我现在已经尝试过这段代码，它在第一次单击时可以工作，但是一旦由于某种原因单击它就不能在再次单击时工作：

$('.pushbutton').on('click',function(){

        $('.left_sidebar, .footer').animate({left: "-320px"}, 800 );
        $('.main_body_right').animate({marginLeft: "25px"}, 800 );
        $('.pushbutton').animate({fontSize: "24px",fontWeight: "400",paddingTop: "3px"}, 500 );
        $('.pushbutton').html('+');
        $('.pushbutton').attr('class','pushbuttonplus');

    });

    $('.pushbuttonplus').on('click',function(){

        $('.left_sidebar, .footer').animate({left: "0px"}, 800 );
        $('.main_body_right').animate({marginLeft: "325px"}, 800 );
        $('.pushbuttonplus').animate({fontSize: "26px",fontWeight: "700",paddingTop: "0px"}, 500 );
        $('.pushbuttonplus').html('-');
        $('.pushbuttonplus').attr('class','pushbutton');

    });
4

2 回答 2

3

因为您正在动态更改/添加/删除元素的类，所以选择器不会绑定到任何元素。

改为使用event delegation，因此您的事件将附加在主体上，但仅在匹配特定选择器时。

参考：

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最里面到最外面的元素），并为沿着该路径匹配选择器的任何元素运行处理程序。

代码：

$('body').on('click','.pushbutton', function () {

    alert("demo1")

    $('.left_sidebar, .footer').animate({
        left: "-320px"
    }, 800);
    $('.main_body_right').animate({
        marginLeft: "25px"
    }, 800);
    $('.pushbutton').animate({
        fontSize: "24px",
        fontWeight: "400",
        paddingTop: "3px"
    }, 500);
    $('.pushbutton').html('+');
    $('.pushbutton').attr('class', 'pushbuttonplus');

});

$('body').on('click','.pushbuttonplus', function () {

      alert("demo2")

    $('.left_sidebar, .footer').animate({
        left: "0px"
    }, 800);
    $('.main_body_right').animate({
        marginLeft: "325px"
    }, 800);
    $('.pushbuttonplus').animate({
        fontSize: "26px",
        fontWeight: "700",
        paddingTop: "0px"
    }, 500);
    $('.pushbuttonplus').html('-');
    $('.pushbuttonplus').attr('class', 'pushbutton');

});

演示：http: //jsfiddle.net/IrvinDominin/wBBZm/

于 2013-10-20T10:56:21.980 回答
0

我改变了这个逻辑，而是这样做了：

// Make the push sidebar push button functional
    $('.pushbutton a').on('click',function(event){

        event.preventDefault();

        var currentId = $(this).attr('id');

        if(currentId == 'open_sidebar'){

            $('.left_sidebar, .footer').animate({left: "-320px"}, 800 );
            $('.main_body_right').animate({marginLeft: "25px"}, 800 );
            $('#open_sidebar').html('<a href="#">+</a>');
            $('#open_sidebar').attr('id','close_sidebar');

        }

        if(currentId == 'close_sidebar'){

            $('.left_sidebar').animate({left: "0px"}, 800 );
            $('.footer').animate({left: "40px"}, 800 );
            $('.main_body_right').animate({marginLeft: "325px"}, 800 );
            $('#close_sidebar').html('<a href="#">-</a>');
            $('#close_sidebar').attr('id','open_sidebar');

        }

    });

这接缝可以解决问题:)

于 2013-10-20T10:53:25.640 回答