单击两个元素切换菜单

Question

var main = function() {
    $('#menu-open').click(function() {
        $('.menu').animate({ left: '0px' }, 200);
        $('body').animate({ left: '285px' }, 200);
    });
    $('#menu-close').click(function() {
        $('.menu').animate({ left: '-285px' }, 200);
        $('body').animate({ left: '0px' }, 200);
    });
};

$(document).ready(main);

我希望能够在菜单打开时点击#menu-close或#menu-open关闭菜单。我怎么能这样做？

Answer 1

您可以将单个功能绑定到打开/关闭按钮。在功能内部，检查菜单状态。例如：

$('.menu-open, .menu-close').click(function() {
    var left = $('.menu').offset().left;

    if (left < 0) {
        $('.menu').animate({ left: 0 }, 200);
        $('body').animate({ left: 285 }, 200);
    } else {
        $('.menu').animate({ left: -285 }, 200);
        $('body').animate({ left: 0 }, 200);
    }
});

修改

这是更新的小提琴：

https://jsfiddle.net/mahdaen/jsf0oc99/3/