javascript - 移动菜单 Jquery 使非菜单项可单击关闭菜单。

Question

我有一个简单的脚本toogle代码，可以打开和关闭移动响应菜单。

我的问题是，当菜单打开时，我还希望能够单击菜单外部的区域来关闭菜单。任何帮助都会很棒。

$(document).ready(function(){
    $("#mobile-toggle").click(function(){
            $("#mobile-menu").animate({
            left: "0px",
            opacity:1.0
    }, 100); 
});
    $("#mobile-toggle2").click(function(){
            $("#mobile-menu").animate({
            left: "-200px",
            opacity:1.0
    }, 100); 
}); });

Answer 1

将以下 JQUERY 扩展与现有代码结合使用:

$.fn.clickOutsideThisElement = function (callback) {
    return this.each(function () {
      var self = this;
      $(document).click(function (e) {
          if (!$(e.target).closest(self).length) {
              callback.call(self, e)
          }
      })
    });
};

并像这样调用函数:

$("#mobile-toggle").clickOutsideThisElement(function() {
   $("#mobile-menu").animate({
       left: "0px",
       opacity: 0
   }, 1000);
}).click(function() { //Click inside menu
   $("#mobile-menu").animate({
       left: "-200px",
       opacity: 1.0
   }, 1000);
});

<强> DEMO HERE >>