將另一個可點擊的元素添加到現有的切換

Question

當前，單擊#menubutton切換這兩個功能（它將菜單滑入和滑出）。我怎樣才能關閉這個菜單，不僅要再次點擊#menubutton，還要點擊#page上的任何地方？

小提琴：http://jsfiddle.net/3Dwjd/

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

Answer 1

使用$('#page').click(handler2);和對#menubutton事件設置e.stopPropagation();。如果您點擊鏈接，這將會阻止#page事件觸發。

See it in action

Answer 2

您可以使用CSS類來表示開放menu元素：

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

http://jsfiddle.net/3Dwjd/2/