javascript - Jquery：点击链接时重新绑定功能

Question

我有一个在点击时显示的菜单（类似于 fb 移动菜单）。当您单击视口上的任意位置时，菜单再次隐藏并且链接被禁用（我想取消绑定链接，因为如果没有取消绑定此单击功能，我的视口上的链接将无法工作）

但是，当我单击显示菜单按钮时，我希望能够再次绑定视口单击。

$(function(){
var menuStatus;

$("a.showMenu").click(function(){
    if(menuStatus != true){             
    $("#menu").animate({
        height: "44px",
      }, 300, function(){menuStatus = true});
      return false;
      } else {
        $("#menu").animate({
        height: "0px",
      }, 300, function(){menuStatus = false});
        return false;
      }
});
$("#viewport").bind('click.navclose', function(){ 
$(this).unbind('click.navclose');  
if(menuStatus = true){     
        $("#menu").animate({
        height: "0px",
      }, 300, function(){menuStatus = false});
        return false;
    }
});

});

Answer 1

试试这个，希望会有意义

$(function() {
    var menuStatus;

    $("a.showMenu").click(function() {
        $("#viewport").bind('click', handler);
        if (menuStatus != true) {
            $("#menu").animate({
                height: "44px",
            }, 300, function() {
                menuStatus = true
            });
            return false;
        } else {
            $("#menu").animate({
                height: "0px",
            }, 300, function() {
                menuStatus = false
            });
            return false;
        }
    });
    $("#viewport").bind('click', handler);

    var handler = function() {
        $(this).unbind('click');
        if (menuStatus = true) {
            $("#menu").animate({
                height: "0px",
            }, 300, function() {
                menuStatus = false
            });
            return false;
        }
    }
});​

查看更新的演示