Jquery 将另一个可单击元素添加到现有切换

目前，单击菜单按钮可在这两个功能之间切换（将菜单滑入和滑出）。我如何不仅通过再次单击菜单按钮，而且通过单击页面上的任意位置来关闭此菜单

小提琴：

使用

$（'#page'）。单击（handler2）和设置
e.stopPropagation（）。如果单击链接，这将停止触发#页面事件

您可以使用css类指示打开的
菜单
元素：

$(function(){
    $(document).on('click', '#page.open', handler2);

    $('#menubutton').click(function(e){
            e.preventDefault();
            var $page = $("#page");
            if ($page.hasClass('open')) {
                handler2();
            } else {
                handler1();
            }
            return false;
        });

    function handler1(){
            $("#menubutton").css("color","red");
            $("#menu").animate({left:"0"},150);
            $("#page").animate({left:"300px"},150).addClass('open');
        }
    function handler2(){
            $("#menubutton").css("color","blue");
            $("#menu").animate({left:"-300px"},150);
            $("#page").animate({left:"0"},150).removeClass('open');
        }    
});

为什么要继续绑定和解除绑定单击处理程序？请说明更好的做法是什么。
$(function(){
    $(document).on('click', '#page.open', handler2);

    $('#menubutton').click(function(e){
            e.preventDefault();
            var $page = $("#page");
            if ($page.hasClass('open')) {
                handler2();
            } else {
                handler1();
            }
            return false;
        });

    function handler1(){
            $("#menubutton").css("color","red");
            $("#menu").animate({left:"0"},150);
            $("#page").animate({left:"300px"},150).addClass('open');
        }
    function handler2(){
            $("#menubutton").css("color","blue");
            $("#menu").animate({left:"-300px"},150);
            $("#page").animate({left:"0"},150).removeClass('open');
        }    
});