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 >>

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

1 个答案: