Javascript 在侧边栏菜单外单击和单击菜单项时关闭侧边栏菜单

目标是当我在侧边栏外单击或单击其中一个菜单项时关闭侧边栏菜单。我已经在Javascript中创建了两个工作函数来打开和关闭菜单，单击切换：

<script>
function openNav() {
  document.getElementById("#sideMenu").style.width = "250px";
}

function closeNav() {
  document.getElementById("#sideMenu").style.width = "0";
}

function clickOutsite() {
TO-DO
}

function clickOnItemAndClose() {
TO-DO
}


</script>

<div class="header"></div>
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle" onclick="openNav()">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
  <div id="sideMenu">
    <ul class="sideMenuInner">
      <li class="active"><a href="#" data-toggle="tab">Item1</a></li>
      <li><a href="#" data-toggle="tab">Item2</a></li>
      <li><a href="#" data-toggle="tab">Item3</a></li>
    </ul>
  </div>

函数openNav（）{
document.getElementById（“#侧菜单”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“#侧菜单”）.style.width=“0”；
}
函数clickOutsite（）{
待办事项
}
函数ClickOffices（）{
待办事项
}

我试图创建一个覆盖层并创建一个连接到它的函数，但结果无效

你能帮帮我吗？提前谢谢

编辑：这里有一个演示

---

整个隐藏/显示动画都基于CSS，因此您只需切换复选框的属性

要解决检测外部单击的问题，可以将侧栏包装在div中，然后使用从被单击的元素发出的事件对象的属性

函数hideSidebar（）{
document.getElementById（'openSideMenu'）。checked=false；
}
var sideicontogle=document.getElementById（'sidebarContainer'）；
document.addEventListener（'click'，函数（事件）{
如果（！sidebarContainer.contains（event.target））
hideSidebar（）；
});
html，
身体{
溢出x：隐藏；
身高：100%；
}
身体{
背景：#fff；
填充：0；
保证金：0；
字体系列：“瓦雷拉圆形”，无衬线；
}
.标题{
显示：块；
保证金：0自动；
宽度：100%；
最大宽度：100%；
盒影：无；
背景色：黑色；
位置：固定；
高度：60px！重要；
溢出：隐藏；
z指数：10；
}
梅因先生{
保证金：0自动；
显示：块；
身高：100%；
边缘顶部：60像素；
}
梅因内尔先生{
显示：表格；
身高：100%；
宽度：100%；
文本对齐：居中；
}
.main内分区{
显示：表格单元格；
垂直对齐：中间对齐；
字号：3em；
字体大小：粗体；
字母间距：1.25px；
}
#副菜单{
身高：100%；
位置：固定；
左：0；
宽度：250px；
边缘顶部：60像素；
转换：translateX（-250px）；
转换：转换250ms缓进缓出；
背景：灰色；
z指数：1；
}
sideMenuInner先生{
保证金：0；
填充：0；
边框顶部：1件纯黑；
}
李先生{
列表样式：无；
颜色：#fff；
文本转换：大写；
字体大小：粗体；
填充：20px；
光标：指针；
边框底部：1px纯黑；
}
李斯潘先生{
显示：块；
字体大小：14px；
颜色：rgba（255，255，255，0.50）；
}
西德梅纽纳先生{
颜色：#fff；
文本转换：大写；
字体大小：粗体；
光标：指针；
文字装饰：无；
}
输入[type=“checkbox”]：选中~#侧菜单{
变换：translateX（0）；
}
输入[类型=复选框]{
过渡：均为0.3秒；
框大小：边框框；
显示：无；
}
.Sideicontogle{
过渡：均为0.3秒；
框大小：边框框；
光标：指针；
位置：绝对位置；
z指数：99；
身高：100%；
宽度：100%；
顶部：22px；
左：15px；
高度：22px；
宽度：22px；
}
斯宾纳先生{
过渡：均为0.3秒；
框大小：边框框；
位置：绝对位置；
高度：3倍；
宽度：100%；
背景色：#fff；
}
.水平{
过渡：均为0.3秒；
框大小：边框框；
位置：相对位置；
浮动：左；
利润上限：3倍；
}
.第1部分{
位置：相对位置；
过渡：均为0.3秒；
框大小：边框框；
浮动：左；
}
.第2部分{
过渡：均为0.3秒；
框大小：边框框；
位置：相对位置；
浮动：左；
利润上限：3倍；
}
输入[类型=复选框]：选中~.sideicontogle>.horizontal{
过渡：均为0.3秒；
框大小：边框框；
不透明度：0；
}
输入[类型=复选框]：选中~.sideicontogle>.diagonal.part-1{
过渡：均为0.3秒；
框大小：边框框；
变换：旋转（135度）；
边缘顶部：8px；
}
输入[类型=复选框]：选中~.sideicontogle>.diagonal.part-2{
过渡：均为0.3秒；
框大小：边框框；
变换：旋转（-135度）；
利润上限：-9px；
}
#侧导航覆盖{
位置：固定；
排名：0；
左：0；
宽度：0；
身高：100%；
背景：rgba（0,0,0,1）；
光标：指针；
z指数：1；
}






您能发布演示吗？刚刚添加，谢谢您的时间谢谢，您的解决方案非常完美。我明白我的错误在哪里