Закрыв оба моих #overlay и sidemenu, нажав переключатель div?

Question

Как закрыть оба моих #overlay и sidemenu, нажав на .toggle-canvas div?

Сейчас он работает следующим образом:

• с sidemenu закрыт: при нажатии .toggle-canvas она открывает sidemenu, И исчезает в #overlay

• С sidemenu открытым: при нажатии .toggle-canvas это закрывает sidemenu, но оставляет #overlay открытым

Это i s обычай JQuery Я пытаюсь написать:

$('.toggle-canvas').click(function(e){ 
    $('#overlay').fadeIn(300); 
    e.preventDefault(); 
}); 

$(document).on('click','.toggle-canvas',function() { 
    $('#overlay').fadeOut(300); 
}); 

Если я изменю выше

$(document).on('click','#overlay',function() { 
    $(this).fadeOut(300); 
}); 

она затухает накладку, но оленья кожа закрыть меню.

это является sidemenu.js для справки: (изменения, внесенные в рамках этого кода также являются приемлемыми)

(function() { 
    "use strict"; 
    var a = "offcanvas", 
     b = { 
      toggle: ".toggle-canvas", 
      canvas: ["main"], 
      open: function() {}, 
      close: function() {}, 
      resize: function() {}, 
      init: function() {}, 
      debug: !1 
     }; 
    return $[a] = function(c, d) { 
     this.element = c, this.$offcanvas = $(c), this.options = $.extend({}, b, d), this.debug = this.options.debug, this._defaults = b, this._name = a; 
     var e = $.Callbacks("stopOnFalse"); 
     e.add($.proxy(this.initialize, this)), "function" == typeof this.options.init && e.add($.proxy(this.options.init, this)), e.fire() 
    }, $[a].prototype = { 
     initialize: function() { 
      this.debug && console.log("init offcanvas", this), this.$offcanvas.attr("alive", !0), this.uniqueID = (new Date).getTime(), this.$offcanvas.data("uniqueID", this.uniqueID), this.processSelectors(), this.attachEvents(), this.setSizes() 
     }, 
     toggle: function(a) { 
      return a && (a.preventDefault(), a.stopPropagation()), this.state.open ? this.close() : this.open() 
     }, 
     open: function() { 
      this.debug && console.log("open offcanvas", this); 
      var a = $.Callbacks("stopOnFalse"); 
      a.add($.proxy(function() { 
       this.state.open = !0, this.setBodyPosition(this.$offcanvas.data("width")), this.state.position = this.$offcanvas.data("width"), this.$offcanvas.css({ 
        "-webkit-overflow-scrolling": "touch" 
       }), this.$offcanvas.attr("active", !0), this.el.toggle.attr("active", !0), this.el.toggle.attr("moving", !0), setTimeout($.proxy(function() { 
        this.el.toggle.attr("moving", !1), this.el.toggle.attr("open", !0) 
       }, this), 250) 
      }, this)), a.add($.proxy(function() { 
       this.resizeTimeout = 0, $(window).on("resize.offCanvasResize_" + this.uniqueID, $.proxy(this.onResize, this)) 
      }, this)), "function" == typeof this.options.open && a.add($.proxy(this.options.open, this)), a.fire() 
     }, 
     close: function() { 
      this.debug && console.log("close offcanvas", this); 
      var a = $.Callbacks("stopOnFalse"); 
      a.add($.proxy(function() { 
       this.state.open = !1, this.setBodyPosition(0), this.state.position = 0, this.$offcanvas.css({ 
        "-webkit-overflow-scrolling": "" 
       }), this.$offcanvas.attr("active", !1), this.el.toggle.attr("active", !1), this.el.toggle.attr("moving", !0), setTimeout($.proxy(function() { 
        this.el.toggle.attr("moving", !1), this.el.toggle.attr("open", !1) 
       }, this), 250) 
      }, this)), a.add($.proxy(function() { 
       $(window).off("resize.offCanvasResize_" + this.uniqueID) 
      }, this)), "function" == typeof this.options.close && a.add($.proxy(this.options.close, this)), a.fire() 
     }, 
     setBodyPosition: function(a) { 
      $.each(this.el.canvas, $.proxy(function(b, c) { 
       $(c).css(this.css.translate(a)), 0 !== a && $("html,body").addClass("noscroll"), 0 === a && $("html,body").removeClass("noscroll") 
      }, this)) 
     }, 
     processSelectors: function() { 
      this.el = {}, this.el.toggle = this.options.toggle, "string" == typeof this.el.toggle && (this.el.toggle = $(this.el.toggle)), "object" == typeof this.options.canvas && "string" == typeof this.options.canvas[0] ? (this.el.canvas = [], $.each(this.options.canvas, $.proxy(function(a, b) { 
       this.el.canvas.push($(b)), $(b).attr("canvas", !0) 
      }, this))) : this.el.canvas = !1 
     }, 
     attachEvents: function() { 
      this.el.toggle.on("click.toggleCanvas_" + this.uniqueID, $.proxy(function(a) { 
       a.preventDefault(), a.stopPropagation(), this.toggle() 
      }, this)) 
     }, 
     onResize: function() { 
      clearTimeout(this.resizeTimeout), this.resizeTimeout = setTimeout($.proxy(function() { 
       return this.setSizes(), "function" == typeof this.options.resize && this.options.resize(), "none" === this.el.toggle.css("display") && this.state.open ? this.close() : void 0 
      }, this, 100)) 
     }, 
     setSizes: function() { 
      return window.innerHeight ? (this.$offcanvas.css("height", window.innerHeight), this.el.canvas[0].css("min-height", window.innerHeight)) : (this.$offcanvas.css("height", $(window).height()), this.el.canvas[0].css("min-height", $(window).height())), "0px" === this.$offcanvas.css("left") && this.$offcanvas.data("side", "left"), "0px" === this.$offcanvas.css("right") && this.$offcanvas.data("side", "right"), this.$offcanvas.data("width", parseInt(this.$offcanvas.css("min-width"), 10)), "right" === this.$offcanvas.data("side") && this.$offcanvas.data("width", -this.$offcanvas.data("width")), this.state.open ? this.setBodyPosition(this.$offcanvas.data("width")) : void 0 
     }, 
     state: { 
      open: !1, 
      position: 0 
     }, 
     css: { 
      translate: function(a) { 
       return { 
        "-webkit-transform": "translate3d(" + a + "px,0,0)", 
        "-moz-transform": "translate3d(" + a + "px,0,0)", 
        "-ms-transform": "translate3d(" + a + "px,0,0)", 
        "-o-transform": "translate3d(" + a + "px,0,0)", 
        transform: "translate3d(" + a + "px,0,0)" 
       } 
      } 
     }, 
     destroy: function() { 
      this.debug && console.log("destroying offcanvas", this), this.close(), $(window).off("toggleCanvas offCanvasResize"), this.el.canvas && $.each(this.el.canvas, $.proxy(function(a, b) { 
       $(b).attr("canvas", !1) 
      }, this)), this.$offcanvas.css("height", ""), this.el.canvas[0].css("min-height", ""), this.$offcanvas.attr("alive", !1) 
     } 
    }, $.fn[a] = function(b) { 
     return this.each(function() { 
      if (!$(this).data("form5-" + a)) return $(this).data("form5-" + a, new $[a](this, b)); 
      var c = $(this).data("form5-" + a); 
      switch (b) { 
       case "open": 
        c.open(); 
        break; 
       case "close": 
        c.close(); 
        break; 
       case "destroy": 
        c.destroy(), $(this).removeData("form5-" + a); 
        break; 
       default: 
        c.toggle() 
      } 
     }) 
    } 
}).call(this); 

Answer 1

Применение fadeToggle метод FadeIn и FadeOut из #overlay.

Попробуйте это фрагменты кода:

$(document).on('click','.toggle-canvas',function(e) { 
    $('#overlay').fadeToggle(300); 
    e.preventDefault(); 
}); 

Примечание: Пожалуйста, не связывающегося для одного класса щелкните событие в два раз

Надеется, что это помогает вам.