Jquery 隐藏并关闭隐藏的div

我有一个隐藏的固定div，如果我点击一个btn，我想显示它，如果我点击其他任何地方，我想关闭它。现在，如果单击按钮或页面上的任何位置，我可以隐藏div

对于下面的代码，我已经实现了我想要的一半。但是，如果单击绿色框中的任何位置，我希望div仍然打开（可见）。有谁能提出一些建议来帮助我做到这一点吗

$（函数（）{
var OPEN=0；/*打开的偏移量*/
var CLOSE=-10000；/*要关闭的偏移量*/
var t=0；/*默认时间*/
变量$obtn=$（“.obtn侧”）；
变量$cbtn=$（“.cbtn侧”）；
var main=“.main包装器”；
$obtn.点击（功能（事件）{
event.preventDefault（）；
var cid=$（this.attr（“href”）；/*获取容器id*/
导航效果（cid，打开，0）；
});
$cbtn.单击（功能（事件）{
event.preventDefault（）；
var cid=$（this.attr（“href”）；
导航效果（cid，关闭，0）；
});
$（“.side wrapper”）。单击（函数（事件）{
导航效果（“侧”，闭合，0）；
});
});
功能导航效果（c、o、t）{
var$con=$（c）；
$con.animate({
右：o
}，t）；
}

。侧面包装器{
位置：固定；
顶部：0px；
宽度：100%；
身高：100%；
背景：黑色；
右图：-1100%；
}
.侧边集装箱{
浮动：对；
背景：绿色；
宽度：50%；
身高：100%；
位置：相对位置；
盒影：0px 0px 5px 2px rgba（52,73,94,0.9）；
}

侧栏

您需要停止事件冒泡，以防单击绿色区域

。侧面容器

：

$(".side-container").click(function(e) {
    e.stopPropagation();
});

查看下面的演示

$（函数（）{
var OPEN=0；/*打开的偏移量*/
var CLOSE=-10000；/*要关闭的偏移量*/
var t=0；/*默认时间*/
变量$obtn=$（“.obtn侧”）；
变量$cbtn=$（“.cbtn侧”）；
var main=“.main包装器”；
$obtn.点击（功能（事件）{
event.preventDefault（）；
var cid=$（this.attr（“href”）；/*获取容器id*/
导航效果（cid，打开，0）；
});
$cbtn.单击（功能（事件）{
event.preventDefault（）；
var cid=$（this.attr（“href”）；
导航效果（cid，关闭，0）；
});
$（“.side wrapper”）。单击（函数（事件）{
导航效果（“侧”，闭合，0）；
});
$（“.side container”）。单击（函数（e）{
e、 停止传播（）；
});
});
功能导航效果（c、o、t）{
var$con=$（c）；
$con.animate({
右：o
}，t）；
}

。侧面包装器{
位置：固定；
顶部：0px；
宽度：100%；
身高：100%；
背景：黑色；
右图：-1100%；
}
.侧边集装箱{
浮动：对；
背景：绿色；
宽度：50%；
身高：100%；
位置：相对位置；
盒影：0px 0px 5px 2px rgba（52,73,94,0.9）；
}

侧栏