교수님, 배우는 학생입니다.

01버튼   02버튼   03버튼   04버튼~~ 이런식으로 있는데

아래는 버튼을 누르면 패널이 열리고 닫히는

자바코드입니다.

01버튼을 누르고 다시 02버튼을 누르면 

01누르고 열린 패널이 02 클릭 때문에 닫혀버립니다.

저는 01누르고 열린 상태에서 이 버튼들 바깥 영역을 클릭하면 닫히지만

02버튼을 누르면 닫히지 않는 상태가 되게 하고 싶습니다.

연이어 01 03 04버튼을 누를 수 있는데...

단지 버튼을 누르면 열렸다 닫혔다 하기 때문에 많이 불편합니다. 유유

// This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}(function(e) {
    "use strict";

    function r(e, r) {
        var i = e.outerWidth(true),
            s = {},
            o = {};
        if (e.is(":visible") || n) {
            return
        }
        n = true;
        e.addClass("ps-active-panel").css({
            position: "fixed",
            top: 0,
            height: "100%",
            "z-index": 999999
        });
        e.data(r);
        switch (r.side) {
            case "left":
                e.css({
                    left: "-" + i + "px",
                    right: "auto"
                });
                s["margin-left"] = "+=" + i;
                o.left = "+=" + i;
                break;
            case "right":
                e.css({
                    left: "auto",
                    right: "-" + i + "px"
                });
                s["margin-left"] = "-=" + i;
                o.right = "+=" + i;
                break
        }
        t.animate(s, r.duration);
        e.show().animate(o, r.duration, function() {
            n = false
        })
    }
    var t = e("body"),
        n = false;
    e.panelslider = function(t, n) {
        var i = e(".ps-active-panel");
        var s = {
            side: "left",
            duration: 200,
            clickClose: true
        };
        n = e.extend({}, s, n);
        if (i.is(":visible") && i[0] != t[0]) {
            e.panelslider.close(function() {
                r(t, n)
            })
        } else if (!i.length || i.is(":hidden")) {
            r(t, n)
        }
    };
    e.panelslider.close = function(r) {
        var i = e(".ps-active-panel"),
            s = i.data("duration"),
            o = i.outerWidth(true),
            u = {},
            a = {};
        if (!i.length || i.is(":hidden") || n) {
            return
        }
        n = true;
        switch (i.data("side")) {
            case "left":
                u["margin-left"] = "-=" + o;
                a.left = "-=" + o;
                break;
            case "right":
                u["margin-left"] = "+=" + o;
                a.right = "-=" + o;
                break
        }
        i.animate(a, s);
        t.animate(u, s, function() {
            i.hide();
            i.removeClass("ps-active-panel");
            n = false;
            if (r) {
                r()
            }
        })
    };
    e(document).bind("click keyup", function(t) {
        var n = e(".ps-active-panel");
        if (t.type == "keyup" && t.keyCode != 27) {
            return
        }
        if (n.is(":visible") && n.data("clickClose")) {
            e.panelslider.close()
        }
    });
    e(document).on("click", ".ps-active-panel", function(e) {
        e.stopPropagation()
    });
    e.fn.panelslider = function(t) {
        this.click(function(n) {
            var r = e(".ps-active-panel"),
                i = e(this.getAttribute("href"));
            if (r.is(":visible") && i[0] == r[0]) {
                e.panelslider.close()
            } else {
                e.panelslider(i, t)
            }
            n.preventDefault();
            n.stopPropagation()
        });
        return this
    }
})(jQuery)