Question

目前，点击#menubutton会在这两个功能之间切换（它会滑入和滑出菜单）。如何关闭此菜单不仅可以再次点击#menubutton，还可以点击#page？

上的任意位置

$(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/

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

2 个答案: