javascript - 通过单击切换 div 来关闭我的#overlay 和侧菜单？

Question

如何通过单击 .toggle-canvas div 关闭我的 #overlay 和侧边菜单？

现在它的工作原理如下:

• 侧边菜单关闭:单击.toggle-canvas时，它会打开侧边菜单，并在#overlay中淡出

• 侧边菜单打开:单击.toggle-canvas时，它会关闭侧边菜单，但使#overlay保持打开状态

这是我正在尝试编写的自定义 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方法进行#overlay的fadeIn和fadeOut。

试试这个代码片段:

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

注意:单个类请勿绑定(bind)两次点击事件

希望这对您有帮助。