Mobile Menu Jquery 使非菜单项可点击关闭菜单。

【问题标题】：Mobile Menu Jquery to make non-menu items clickable close menu.Mobile Menu Jquery 使非菜单项可点击关闭菜单。
【发布时间】：2014-08-01 14:57:48
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery mobile menu

【解决方案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 >>

【讨论】：

谢谢。正是我需要的。