Question

我的测试网站有问题：

http://devauth.labscope.de/htmlapp/report-overview.html

我的问题是：当我将浏览器窗口缩放到768px宽度时，会出现一个带有两个图标（左侧和右侧）的标题。单击它们时，会使用滑动动画切换相应的菜单。当我第二次点击右侧图标时没有任何反应。你能告诉我为什么会这样吗？

这是我的jQuery代码：

 jQuery('#content, #footer').each(function() {
            $(this).data('left', this.style.left);
        });

        jQuery('.category').on("click", function(e){
            e.preventDefault();

            var state   = $(this).data('state'),
                wrapper = $('#content').data('left'),
                footer  = $('#footer').data('left');


            jQuery("#content").animate({
                left: state ? wrapper : 250,
                duration: 1000
            }, "normal");

            jQuery("#footer").animate({
                left: state ? footer : 250,
                duration: 1000
            }, "normal");

            jQuery(this).data('state', !state);
        });

    jQuery('#content, #footer').each(function() {
        $(this).data('right', this.style.right);
    });

    jQuery('.filter').on("click", function(e){
        e.preventDefault();

        var state   = $(this).data('state'),
            wrapper = $('#content').data('right'),
            footer  = $('#footer').data('right');

        jQuery("#content").animate({
            right: state ? wrapper : 250,
            duration: 1000
        }, "normal");

        jQuery("#footer").animate({
            right: state ? footer : 250,
            duration: 1000
        }, "normal");

        jQuery(this).data('state', !state);


    });

我希望有人可以帮我解决这个问题。

Answer 1

不要将Right设置为250，而是尝试将left设置为-250。

jQuery动画示例逻辑不起作用

1 个答案: